* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #5a99c5;
    --secondary-color: #779974;
    --accent-color: #ff6b35;
    --text-dark: #2c3e50;
    --text-light: #ecf0f1;
    --bg-light: #fbf9f5;
    --bg-white: #ffffff;
    --border-color: #dee2e6;
    --success-color: #28a745;
    --error-color: #dc3545;
    --shadow: 0 2px 8px rgba(0,0,0,0.1);
    --card-title-color: #1a3060;
    --footer-bg: #bba478;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-light);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Header */
.app-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: var(--text-light);
    padding: 1rem;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-content {
    text-align: center;
    margin-bottom: 1rem;
}

.header-content h1 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.subtitle {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* ---------- Header navigation: consistent Home + Back on every page ----------
   Previously each page (or none) defined its own .back-link locally, with
   different or missing styles depending on which CSS file it happened to
   load. Consolidated here so it only needs to exist once. */
.header-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0.5rem;
}
.header-nav .back-link,
.header-nav .home-link {
    color: #fff;
    text-decoration: none;
    font-size: 1.1rem;
    opacity: 0.95;
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}
.header-nav .back-link:hover,
.header-nav .home-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* ---------- "Identify from Photo" CTA at the bottom of each field guide ----------
   Previously only defined locally in wildflowers.html; birds/butterflies/bees had
   no styling for this at all and rendered it as a plain unstyled link. Consolidated
   here so all four guides match. */
.identify-btn {
    display: block;
    width: calc(100% - 2rem);
    max-width: 500px;
    margin: 1rem auto;
    padding: 1.25rem;
    background: linear-gradient(135deg, #779974 0%, #1a3060 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 12px rgba(45, 80, 22, 0.3);
}
.identify-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(45, 80, 22, 0.4);
}

/* Tab Navigation */
.tab-nav {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.tab-btn {
    flex: 1;
    max-width: 150px;
    padding: 0.75rem;
    border: none;
    background: rgba(255,255,255,0.1);
    color: var(--text-light);
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.tab-btn.active {
    background: var(--bg-white);
    color: var(--primary-color);
    font-weight: 600;
}

/* Main Content */
.main-content {
    padding: 1rem;
    max-width: 800px;
    margin: 0 auto;
}

.view {
    display: none;
}

.view.active {
    display: block;
}

.view-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.view-header h2 {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.help-text {
    color: #6c757d;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

/* Hikes List */
.hikes-list {
    display: grid;
    gap: 1rem;
}

.hike-card {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: var(--shadow);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hike-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.hike-card h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.hike-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}

.stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #6c757d;
}

.difficulty-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.difficulty-easy {
    background-color: #d4edda;
    color: #155724;
}

.difficulty-moderate {
    background-color: #fff3cd;
    color: #856404;
}

.difficulty-strenuous {
    background-color: #f8d7da;
    color: #721c24;
}

/* Modal */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--bg-white);
    border-radius: 12px;
    padding: 1.5rem;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    width: 100%;
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    color: #6c757d;
    cursor: pointer;
    line-height: 1;
}

/* Upload Area */
.upload-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 2rem 0;
}

.preview-area {
    text-align: center;
    margin: 2rem 0;
}

.preview-area.hidden {
    display: none;
}

#photo-preview {
    max-width: 100%;
    max-height: 400px;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

/* Buttons */
.primary-btn,
.secondary-btn,
.icon-btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.primary-btn {
    background: var(--primary-color);
    color: var(--text-light);
    width: 100%;
}

.primary-btn:hover {
    background: var(--secondary-color);
}

.secondary-btn {
    background: var(--bg-white);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    width: 100%;
}

.secondary-btn:hover {
    background: var(--bg-light);
}

.icon-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    padding: 0.5rem;
    cursor: pointer;
}

/* Results */
.results {
    margin-top: 2rem;
}

.result-section {
    background: var(--bg-white);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.result-section h3 {
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.result-item {
    padding: 0.75rem;
    border-left: 3px solid var(--secondary-color);
    background: var(--bg-light);
    margin-bottom: 0.5rem;
    border-radius: 4px;
}

.result-item strong {
    color: var(--primary-color);
}

.confidence {
    color: var(--secondary-color);
    font-weight: 600;
}

/* Loading & Error States */
.loading,
.error {
    text-align: center;
    padding: 2rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.loading {
    background: var(--bg-light);
    color: var(--secondary-color);
}

.error {
    background: #f8d7da;
    color: var(--error-color);
}

.hidden {
    display: none !important;
}

/* Offline Indicator */
.offline-indicator {
    position: fixed;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--error-color);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    box-shadow: var(--shadow);
    z-index: 1001;
}

/* Responsive Design */
@media (min-width: 768px) {
    .header-content h1 {
        font-size: 2rem;
    }
    
    .hikes-list {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
    
    .upload-area {
        flex-direction: row;
    }
}

/* ============================================================
   v91: Species ID feedback modal + alternative cards
   ============================================================ */

.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.feedback-modal.hidden {
    display: none !important;
}
.feedback-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}
.feedback-modal-content {
    position: relative;
    background: #fff;
    border-radius: 12px;
    padding: 1.25rem;
    max-width: 480px;
    width: 100%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

/* "ID incorrect. Send feedback" button under results */
.feedback-btn {
    display: block;
    width: 100%;
    padding: 0.65rem 1rem;
    margin-top: 1rem;
    background: #fff;
    color: #dc3545;
    border: 1.5px solid #dc3545;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.feedback-btn:hover {
    background: #dc3545;
    color: #fff;
}

/* Alternative species cards */
.alt-card-header:hover {
    background: rgba(0, 0, 0, 0.02);
}
.alt-card-body.hidden {
    display: none !important;
}

/* v96: "Analysis complete" banner.
   Moved from bottom to TOP. On iPhone a bottom-fixed element sits under
   Safari's collapsing toolbar and the home indicator, so it was effectively
   invisible there while working fine on iPad's larger viewport.
   Top placement has no such conflict, and safe-area-inset-top keeps it clear
   of the notch / Dynamic Island. Auto-dismisses after 6s. */
.results-banner {
    position: fixed;
    left: 50%;
    /* Sits just below the sticky app header. Deliberately NOT using
       env(safe-area-inset-*) because that requires viewport-fit=cover, which
       would push the header content under the notch. The header already
       occupies the unsafe area, so offsetting past it is sufficient. */
    top: 4.5rem;
    transform: translateX(-50%) translateY(-200%);
    background: #1a3060;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 24px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    font-size: 0.9rem;
    z-index: 1500;
    cursor: pointer;
    max-width: calc(100vw - 2rem);
    text-align: center;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    opacity: 0;
    pointer-events: none;
}
.results-banner.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

/* ============================================================
   v98: Add to Nature Log button + note editing
   ============================================================ */

.add-to-log-btn {
    display: block;
    width: 100%;
    padding: 0.85rem 1rem;
    margin-top: 1rem;
    background: #1a3060;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.add-to-log-btn:hover { background: #24407a; }
.add-to-log-btn.added {
    background: #28a745;
    cursor: default;
}
.view-log-link {
    display: block;
    text-align: center;
    margin-top: 0.6rem;
    color: #1a3060;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Notes in the Nature Log */
.log-note {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: #5f5e5a;
    line-height: 1.5;
}
.log-note-text { font-style: italic; }
.log-note-empty { color: #999; }
.log-note-edit {
    background: none;
    border: none;
    color: #1a3060;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.1rem 0.3rem;
    font-family: inherit;
}
.log-note-edit:hover { text-decoration: underline; }

.log-note-editor textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem;
    font-family: inherit;
    font-size: 0.85rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    resize: vertical;
}
.log-note-editor-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.35rem;
}
.log-note-save {
    background: #1a3060;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.log-note-save:hover { background: #24407a; }
/* v98: visible confirmation that the save landed */
.log-note-save.saved {
    background: #28a745;
    cursor: default;
}
.log-note-save.save-failed {
    background: #dc3545;
    cursor: default;
}
.log-note-cancel {
    background: none;
    border: none;
    color: #6c757d;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
}
.log-note-count {
    font-size: 0.7rem;
    color: #999;
    margin-left: auto;
}