/*
 * Shared UI foundation for Bird Demo pages.
 * Keep this file conservative: page-level templates still own their layout.
 */
:root {
    --ui-bg: #f5faf6;
    --ui-surface: #fbfefb;
    --ui-surface-soft: #f2f7f3;
    --ui-text: #1e2f2c;
    --ui-muted: #60796e;
    --ui-primary: #2f765b;
    --ui-primary-strong: #1f5a43;
    --ui-border: #dce8df;
    --ui-danger: #b42323;
    --ui-warning: #8a6100;
    --ui-radius: 12px;
    --ui-shadow: 0 8px 24px rgba(20, 42, 33, 0.06);
    --ui-focus: 0 0 0 3px rgba(47, 118, 91, 0.18);
}

html {
    text-size-adjust: 100%;
    min-width: 320px;
}

body {
    accent-color: var(--ui-primary);
    overflow-wrap: anywhere;
}

button,
input,
select,
textarea {
    font: inherit;
    min-width: 0;
}

img,
svg,
canvas,
video {
    max-width: 100%;
}

.avatar,
.rail-avatar,
.profile-avatar,
.message-avatar,
.user-avatar,
.author-avatar,
.comment-avatar,
.friend-avatar,
.member-avatar,
img[class*="avatar"],
[class*="avatar-wrap"],
[class*="avatar-frame"] {
    border-radius: 50% !important;
}

img.avatar,
img.rail-avatar,
img.profile-avatar,
img.message-avatar,
img.user-avatar,
img.author-avatar,
img.comment-avatar,
img.friend-avatar,
img.member-avatar,
img[class*="avatar"] {
    object-fit: cover !important;
}

.page,
.page-shell,
.page-wrap,
.container,
.main-container,
.content,
.content-grid,
.card,
.card-module,
.panel,
.modal-content,
.profile-card,
.top-nav,
.route-toolbar,
.route-actions,
.route-item,
.chat,
.side,
.contacts {
    min-width: 0;
}

.card,
.card-module,
.panel,
.modal-content,
.profile-card,
.main-container,
.content-grid {
    min-width: 0;
}

table,
.table-wrap,
.records-table,
.species-table,
.summary-table {
    max-width: 100%;
}

@media (max-width: 900px) {
    .main-container,
    .content-grid,
    .profile-grid,
    .dashboard-grid,
    .admin-main,
    .portal-grid {
        width: 100%;
        max-width: 100%;
    }

    .card,
    .card-module,
    .panel,
    .profile-card {
        max-width: 100%;
    }
}

button,
a,
[role="button"] {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: none;
    box-shadow: var(--ui-focus);
}

::selection {
    background: rgba(47, 118, 91, 0.18);
    color: var(--ui-text);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(220, 232, 223, 0.45);
}

::-webkit-scrollbar-thumb {
    background: rgba(47, 118, 91, 0.36);
    border-radius: 999px;
    border: 2px solid rgba(245, 250, 246, 0.85);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(47, 118, 91, 0.55);
}

.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-link,
.tab,
.filter-btn {
    transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease,
        transform 0.16s ease, box-shadow 0.16s ease;
}

.btn:disabled,
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-outline:disabled,
button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    transform: none !important;
}

.card,
.card-module,
.panel,
.modal-content {
    border-color: var(--ui-border);
}

.empty,
.empty-hint,
.reports-empty,
.gallery-empty,
.log-empty,
.dynamic-empty,
.species-summary-empty {
    color: var(--ui-muted);
}

.back-link.bw-back-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 8px 14px !important;
    border: 1px solid var(--ui-border) !important;
    border-radius: 12px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-primary-strong) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(20, 42, 33, 0.04) !important;
}

.back-link.bw-back-link:hover {
    background: var(--ui-surface-soft) !important;
    border-color: rgba(47, 118, 91, 0.34) !important;
    color: var(--ui-primary-strong) !important;
    transform: translateY(-1px) !important;
}

:root[data-theme-mode="light"] {
    --ui-bg: #f5faf6;
    --ui-surface: #fbfefb;
    --ui-surface-soft: #eef6f1;
    --ui-text: #17302a;
    --ui-muted: #526f62;
    --ui-primary: #2f765b;
    --ui-primary-strong: #1f5a43;
    --ui-border: #d4e3d9;
    --social-bg: #f4f6f2;
    --social-panel: #ffffff;
    --social-soft: #eef3ed;
    --social-line: #d5e3da;
    --social-text: #17302a;
    --social-muted: #526f62;
    --social-primary: #245a43;
    --social-danger: #a8322b;
    color-scheme: light;
}

:root[data-theme-mode="light"] body,
:root[data-theme-mode="light"] .page,
:root[data-theme-mode="light"] .page-shell,
:root[data-theme-mode="light"] .main-container,
:root[data-theme-mode="light"] .content,
:root[data-theme-mode="light"] .chat {
    color: var(--ui-text);
}

:root[data-theme-mode="light"] input,
:root[data-theme-mode="light"] select,
:root[data-theme-mode="light"] textarea,
:root[data-theme-mode="light"] .input {
    color: var(--ui-text);
}

:root[data-theme-mode="dark"] {
    --ui-bg: #101a17;
    --ui-surface: #16241f;
    --ui-surface-soft: #223630;
    --ui-text: #f3fbf6;
    --ui-muted: #b7d0c5;
    --ui-primary: #6bd0a6;
    --ui-primary-strong: #8de0bc;
    --ui-border: rgba(156, 230, 198, 0.26);
    --ui-danger: #e87474;
    --ui-warning: #e4bd65;
    --ui-shadow: 0 16px 42px rgba(0, 0, 0, 0.32);
    --ui-focus: 0 0 0 3px rgba(107, 208, 166, 0.22);
    --social-bg: #101a17;
    --social-panel: #16241f;
    --social-soft: #223630;
    --social-line: rgba(156, 230, 198, 0.26);
    --social-text: #f3fbf6;
    --social-muted: #b7d0c5;
    --social-primary: #6bd0a6;
    --social-danger: #ff9b93;
    color-scheme: dark;
}

:root[data-theme-mode="dark"] body {
    background:
        radial-gradient(circle at 12% 0%, rgba(107, 208, 166, 0.13), transparent 28%),
        linear-gradient(145deg, #101a17 0%, #18231f 100%) !important;
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] body::before {
    background:
        linear-gradient(135deg, rgba(107, 208, 166, 0.07), transparent 42%),
        repeating-linear-gradient(90deg, rgba(141, 224, 188, 0.045) 0 1px, transparent 1px 24px),
        repeating-linear-gradient(0deg, rgba(141, 224, 188, 0.035) 0 1px, transparent 1px 24px) !important;
}

:root[data-theme-mode="dark"] .page,
:root[data-theme-mode="dark"] .page-shell,
:root[data-theme-mode="dark"] .page-wrap,
:root[data-theme-mode="dark"] .container,
:root[data-theme-mode="dark"] .main-container,
:root[data-theme-mode="dark"] .content,
:root[data-theme-mode="dark"] .content-grid,
:root[data-theme-mode="dark"] .main,
:root[data-theme-mode="dark"] .workspace,
:root[data-theme-mode="dark"] .shell,
:root[data-theme-mode="dark"] .chat {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] .card,
:root[data-theme-mode="dark"] .card-module,
:root[data-theme-mode="dark"] .panel,
:root[data-theme-mode="dark"] .module,
:root[data-theme-mode="dark"] .profile-card,
:root[data-theme-mode="dark"] .route-stage,
:root[data-theme-mode="dark"] .route-toolbar,
:root[data-theme-mode="dark"] .route-actions,
:root[data-theme-mode="dark"] .route-item,
:root[data-theme-mode="dark"] .route-list,
:root[data-theme-mode="dark"] .side,
:root[data-theme-mode="dark"] .contacts,
:root[data-theme-mode="dark"] .person,
:root[data-theme-mode="dark"] .message,
:root[data-theme-mode="dark"] .modal,
:root[data-theme-mode="dark"] .modal-content,
:root[data-theme-mode="dark"] .confirm-modal-box,
:root[data-theme-mode="dark"] .empty-card,
:root[data-theme-mode="dark"] .stat,
:root[data-theme-mode="dark"] .report-card,
:root[data-theme-mode="dark"] .report-item,
:root[data-theme-mode="dark"] .detail-header-card,
:root[data-theme-mode="dark"] .edit-report-form,
:root[data-theme-mode="dark"] #graphContainer,
:root[data-theme-mode="dark"] #graphContainer .tooltip,
:root[data-theme-mode="dark"] #graphContainer .filter-panel,
:root[data-theme-mode="dark"] .record-card,
:root[data-theme-mode="dark"] .log-item,
:root[data-theme-mode="dark"] .dynamic-item,
:root[data-theme-mode="dark"] .species-group,
:root[data-theme-mode="dark"] .species-list,
:root[data-theme-mode="dark"] .result-card,
:root[data-theme-mode="dark"] .result-item,
:root[data-theme-mode="dark"] .history-item,
:root[data-theme-mode="dark"] .history-detail,
:root[data-theme-mode="dark"] .upload-area,
:root[data-theme-mode="dark"] .toast-item,
:root[data-theme-mode="dark"] .top-nav,
:root[data-theme-mode="dark"] .toolbar,
:root[data-theme-mode="dark"] .filter-panel,
:root[data-theme-mode="dark"] .form-panel,
:root[data-theme-mode="dark"] .info-panel,
:root[data-theme-mode="dark"] .detail-card,
:root[data-theme-mode="dark"] .legend,
:root[data-theme-mode="dark"] .list-item,
:root[data-theme-mode="dark"] .species-marquee,
:root[data-theme-mode="dark"] .search-suggestions,
:root[data-theme-mode="dark"] .search-result,
:root[data-theme-mode="dark"] .species-summary,
:root[data-theme-mode="dark"] .species-table-wrap,
:root[data-theme-mode="dark"] .bird-species-item,
:root[data-theme-mode="dark"] .profile-hero,
:root[data-theme-mode="dark"] .timeline-item,
:root[data-theme-mode="dark"] .gallery-card,
:root[data-theme-mode="dark"] .achievement-card,
:root[data-theme-mode="dark"] .message-popover,
:root[data-theme-mode="dark"] .message-popover .msg-head,
:root[data-theme-mode="dark"] .message-popover .msg-item,
:root[data-theme-mode="dark"] .profile-stats-mini,
:root[data-theme-mode="dark"] .stat-badge,
:root[data-theme-mode="dark"] .data-grid,
:root[data-theme-mode="dark"] .data-cell,
:root[data-theme-mode="dark"] .meta-pill,
:root[data-theme-mode="dark"] .banner-metric,
:root[data-theme-mode="dark"] .field-note,
:root[data-theme-mode="dark"] .display-slogan,
:root[data-theme-mode="dark"] .selection-bar,
:root[data-theme-mode="dark"] .search-results,
:root[data-theme-mode="dark"] .context-menu,
:root[data-theme-mode="dark"] .forward-box,
:root[data-theme-mode="dark"] .forward-head,
:root[data-theme-mode="dark"] .forward-mode,
:root[data-theme-mode="dark"] .forward-actions,
:root[data-theme-mode="dark"] .quote-preview,
:root[data-theme-mode="dark"] .target-row,
:root[data-theme-mode="dark"] header,
:root[data-theme-mode="dark"] nav,
:root[data-theme-mode="dark"] aside {
    background: rgba(24, 37, 33, 0.92) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: var(--ui-shadow) !important;
}

:root[data-theme-mode="dark"] .card:hover,
:root[data-theme-mode="dark"] .panel:hover,
:root[data-theme-mode="dark"] .person:hover,
:root[data-theme-mode="dark"] .person.active,
:root[data-theme-mode="dark"] .route-item:hover,
:root[data-theme-mode="dark"] .history-item:hover,
:root[data-theme-mode="dark"] .result-item:hover {
    background: rgba(34, 51, 46, 0.96) !important;
    border-color: rgba(141, 224, 188, 0.26) !important;
}

:root[data-theme-mode="dark"] .report-item:hover {
    background: rgba(38, 58, 52, 0.98) !important;
    border-color: rgba(156, 230, 198, 0.34) !important;
}

:root[data-theme-mode="dark"] .log-item:hover {
    background: rgba(38, 58, 52, 0.98) !important;
    border-color: rgba(156, 230, 198, 0.34) !important;
}

:root[data-theme-mode="dark"] h1,
:root[data-theme-mode="dark"] h2,
:root[data-theme-mode="dark"] h3,
:root[data-theme-mode="dark"] h4,
:root[data-theme-mode="dark"] strong,
:root[data-theme-mode="dark"] label,
:root[data-theme-mode="dark"] .title,
:root[data-theme-mode="dark"] .card-title,
:root[data-theme-mode="dark"] .section-title,
:root[data-theme-mode="dark"] .module-title,
:root[data-theme-mode="dark"] .panel-title,
:root[data-theme-mode="dark"] .table-title,
:root[data-theme-mode="dark"] .item-title,
:root[data-theme-mode="dark"] .species-order-title,
:root[data-theme-mode="dark"] .group-title,
:root[data-theme-mode="dark"] .bird-species-name,
:root[data-theme-mode="dark"] .species-summary-title,
:root[data-theme-mode="dark"] .suggestion-name,
:root[data-theme-mode="dark"] .search-result .highlight,
:root[data-theme-mode="dark"] .message-popover .msg-title,
:root[data-theme-mode="dark"] .message-popover .msg-head,
:root[data-theme-mode="dark"] .stat-badge .num,
:root[data-theme-mode="dark"] .data-cell .value,
:root[data-theme-mode="dark"] .banner-metric strong,
:root[data-theme-mode="dark"] .display-name,
:root[data-theme-mode="dark"] .display-handle,
:root[data-theme-mode="dark"] .log-title,
:root[data-theme-mode="dark"] .dyn-text,
:root[data-theme-mode="dark"] .report-title,
:root[data-theme-mode="dark"] .detail-header-card h3,
:root[data-theme-mode="dark"] #graphContainer .tooltip .title,
:root[data-theme-mode="dark"] #graphContainer .filter-panel label,
:root[data-theme-mode="dark"] #graphContainer .empty-state .msg,
:root[data-theme-mode="dark"] .sender-line,
:root[data-theme-mode="dark"] .selection-bar strong,
:root[data-theme-mode="dark"] .forward-head h3,
:root[data-theme-mode="dark"] .name {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] [class*="title"],
:root[data-theme-mode="dark"] [class*="Title"],
:root[data-theme-mode="dark"] [class*="name"],
:root[data-theme-mode="dark"] [class*="Name"],
:root[data-theme-mode="dark"] [class*="label"],
:root[data-theme-mode="dark"] [class*="Label"] {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] p,
:root[data-theme-mode="dark"] small,
:root[data-theme-mode="dark"] .muted,
:root[data-theme-mode="dark"] .sub,
:root[data-theme-mode="dark"] .desc,
:root[data-theme-mode="dark"] .empty,
:root[data-theme-mode="dark"] .empty-hint,
:root[data-theme-mode="dark"] .hint,
:root[data-theme-mode="dark"] .meta,
:root[data-theme-mode="dark"] .item-meta,
:root[data-theme-mode="dark"] .card-subtitle,
:root[data-theme-mode="dark"] .stat-label,
:root[data-theme-mode="dark"] .info-label,
:root[data-theme-mode="dark"] .species-summary-meta,
:root[data-theme-mode="dark"] .bird-species-latin,
:root[data-theme-mode="dark"] .group-item,
:root[data-theme-mode="dark"] .latin,
:root[data-theme-mode="dark"] .suggestion-meta,
:root[data-theme-mode="dark"] .suggestion-empty,
:root[data-theme-mode="dark"] .status,
:root[data-theme-mode="dark"] .time,
:root[data-theme-mode="dark"] .time-divider,
:root[data-theme-mode="dark"] .recall-divider,
:root[data-theme-mode="dark"] .message-quote,
:root[data-theme-mode="dark"] .message-quote p,
:root[data-theme-mode="dark"] .quote-preview p,
:root[data-theme-mode="dark"] .contacts-head p,
:root[data-theme-mode="dark"] .stat span,
:root[data-theme-mode="dark"] .message-popover .msg-content,
:root[data-theme-mode="dark"] .message-popover .msg-meta,
:root[data-theme-mode="dark"] .stat-badge .label,
:root[data-theme-mode="dark"] .data-cell .label,
:root[data-theme-mode="dark"] .banner-metric span,
:root[data-theme-mode="dark"] .display-bio,
:root[data-theme-mode="dark"] .profile-meta-strip,
:root[data-theme-mode="dark"] .meta-pill,
:root[data-theme-mode="dark"] .log-meta,
:root[data-theme-mode="dark"] .log-meta span,
:root[data-theme-mode="dark"] .report-meta,
:root[data-theme-mode="dark"] .report-meta span,
:root[data-theme-mode="dark"] .reports-empty,
:root[data-theme-mode="dark"] .reports-loading,
:root[data-theme-mode="dark"] .reports-error,
:root[data-theme-mode="dark"] .report-section-head .sub,
:root[data-theme-mode="dark"] #graphContainer .tooltip .sub,
:root[data-theme-mode="dark"] #graphContainer .tooltip .meta,
:root[data-theme-mode="dark"] #graphContainer .filter-panel h4,
:root[data-theme-mode="dark"] #graphContainer .empty-state,
:root[data-theme-mode="dark"] .dyn-time,
:root[data-theme-mode="dark"] .log-empty,
:root[data-theme-mode="dark"] .dynamic-empty,
:root[data-theme-mode="dark"] .text-muted {
    color: var(--ui-muted) !important;
}

:root[data-theme-mode="dark"] [class*="meta"],
:root[data-theme-mode="dark"] [class*="Meta"],
:root[data-theme-mode="dark"] [class*="desc"],
:root[data-theme-mode="dark"] [class*="Desc"],
:root[data-theme-mode="dark"] [class*="hint"],
:root[data-theme-mode="dark"] [class*="Hint"],
:root[data-theme-mode="dark"] [class*="subtitle"],
:root[data-theme-mode="dark"] [class*="Subtitle"] {
    color: var(--ui-muted) !important;
}

:root[data-theme-mode="dark"] .stat strong,
:root[data-theme-mode="dark"] .stat-value,
:root[data-theme-mode="dark"] .info-value,
:root[data-theme-mode="dark"] .suggestion-family,
:root[data-theme-mode="dark"] .message-quote strong {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] .message-popover .empty-hint,
:root[data-theme-mode="dark"] .message-popover .msg-content,
:root[data-theme-mode="dark"] .message-popover .msg-meta,
:root[data-theme-mode="dark"] .stat-badge .label,
:root[data-theme-mode="dark"] .data-cell .label,
:root[data-theme-mode="dark"] .meta-pill,
:root[data-theme-mode="dark"] .field-note,
:root[data-theme-mode="dark"] .display-slogan,
:root[data-theme-mode="dark"] .display-bio {
    color: #d5e7df !important;
}

:root[data-theme-mode="dark"] .log-icon,
:root[data-theme-mode="dark"] .dyn-icon {
    color: #9ce6c6 !important;
    filter: saturate(1.15) brightness(1.08);
}

:root[data-theme-mode="dark"] .log-arrow {
    color: #9ce6c6 !important;
}

:root[data-theme-mode="dark"] .log-view-all .btn-link {
    color: var(--ui-primary-strong) !important;
}

:root[data-theme-mode="dark"] .stat-badge,
:root[data-theme-mode="dark"] .data-cell,
:root[data-theme-mode="dark"] .banner-metric,
:root[data-theme-mode="dark"] .meta-pill {
    background: rgba(20, 34, 29, 0.96) !important;
    border-color: rgba(156, 230, 198, 0.28) !important;
}

:root[data-theme-mode="dark"] [style*="color:#1"],
:root[data-theme-mode="dark"] [style*="color: #1"],
:root[data-theme-mode="dark"] [style*="color:#2"],
:root[data-theme-mode="dark"] [style*="color: #2"],
:root[data-theme-mode="dark"] [style*="color:#3"],
:root[data-theme-mode="dark"] [style*="color: #3"],
:root[data-theme-mode="dark"] [style*="color:#4"],
:root[data-theme-mode="dark"] [style*="color: #4"],
:root[data-theme-mode="dark"] [style*="color:#5"],
:root[data-theme-mode="dark"] [style*="color: #5"],
:root[data-theme-mode="dark"] [style*="color:#6"],
:root[data-theme-mode="dark"] [style*="color: #6"],
:root[data-theme-mode="dark"] [style*="color:var(--text-muted)"],
:root[data-theme-mode="dark"] [style*="color: var(--text-muted)"] {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] input,
:root[data-theme-mode="dark"] select,
:root[data-theme-mode="dark"] textarea,
:root[data-theme-mode="dark"] .search-box,
:root[data-theme-mode="dark"] .filter-box,
:root[data-theme-mode="dark"] .composer,
:root[data-theme-mode="dark"] .input {
    background: rgba(10, 22, 18, 0.96) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
}

:root[data-theme-mode="dark"] input::placeholder,
:root[data-theme-mode="dark"] textarea::placeholder {
    color: rgba(243, 251, 246, 0.62) !important;
}

:root[data-theme-mode="dark"] option {
    background: #16241f !important;
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] button,
:root[data-theme-mode="dark"] .btn,
:root[data-theme-mode="dark"] .btn-sm,
:root[data-theme-mode="dark"] .btn-outline,
:root[data-theme-mode="dark"] .btn-secondary,
:root[data-theme-mode="dark"] .btn-danger-outline,
:root[data-theme-mode="dark"] .btn-icon,
:root[data-theme-mode="dark"] .hero-actions button,
:root[data-theme-mode="dark"] .refresh-btn,
:root[data-theme-mode="dark"] .carousel-btn,
:root[data-theme-mode="dark"] .tab,
:root[data-theme-mode="dark"] .filter-btn {
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] .btn:not(.btn-danger):not(.danger):not(.primary):not(.btn-primary):not(.btn-success),
:root[data-theme-mode="dark"] .btn-sm:not(.danger),
:root[data-theme-mode="dark"] .btn-outline,
:root[data-theme-mode="dark"] .btn-secondary,
:root[data-theme-mode="dark"] .btn-danger-outline,
:root[data-theme-mode="dark"] .btn-icon:not(.delete),
:root[data-theme-mode="dark"] .hero-actions button,
:root[data-theme-mode="dark"] .refresh-btn,
:root[data-theme-mode="dark"] .tab,
:root[data-theme-mode="dark"] .filter-btn {
    background: rgba(34, 51, 46, 0.9) !important;
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] button *,
:root[data-theme-mode="dark"] .btn *,
:root[data-theme-mode="dark"] .btn-sm *,
:root[data-theme-mode="dark"] .btn-outline *,
:root[data-theme-mode="dark"] .btn-secondary *,
:root[data-theme-mode="dark"] .btn-danger-outline *,
:root[data-theme-mode="dark"] .btn-icon *,
:root[data-theme-mode="dark"] .hero-actions button *,
:root[data-theme-mode="dark"] .refresh-btn * {
    color: inherit !important;
}

:root[data-theme-mode="dark"] .btn-primary,
:root[data-theme-mode="dark"] .btn-success,
:root[data-theme-mode="dark"] .primary,
:root[data-theme-mode="dark"] .tab.active,
:root[data-theme-mode="dark"] .filter-btn.active {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #082018 !important;
}

:root[data-theme-mode="dark"] .btn-primary *,
:root[data-theme-mode="dark"] .btn-success *,
:root[data-theme-mode="dark"] .primary *,
:root[data-theme-mode="dark"] .tab.active *,
:root[data-theme-mode="dark"] .filter-btn.active * {
    color: #082018 !important;
}

:root[data-theme-mode="dark"] .btn-danger,
:root[data-theme-mode="dark"] .danger,
:root[data-theme-mode="dark"] button.danger,
:root[data-theme-mode="dark"] .btn-danger-outline,
:root[data-theme-mode="dark"] .btn-icon.delete {
    background: rgba(232, 116, 116, 0.16) !important;
    border-color: rgba(232, 116, 116, 0.34) !important;
    color: #ffb8b8 !important;
}

:root[data-theme-mode="dark"] a,
:root[data-theme-mode="dark"] .link {
    color: var(--ui-primary-strong) !important;
}

:root[data-theme-mode="dark"] table,
:root[data-theme-mode="dark"] .table-wrap,
:root[data-theme-mode="dark"] .records-table,
:root[data-theme-mode="dark"] .species-table,
:root[data-theme-mode="dark"] .summary-table {
    background: rgba(24, 37, 33, 0.86) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

:root[data-theme-mode="dark"] th,
:root[data-theme-mode="dark"] td {
    border-color: rgba(141, 224, 188, 0.14) !important;
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] th,
:root[data-theme-mode="dark"] thead,
:root[data-theme-mode="dark"] tr:hover {
    background: rgba(34, 51, 46, 0.9) !important;
}

:root[data-theme-mode="dark"] .back-link.bw-back-link {
    background: var(--ui-surface) !important;
    color: var(--ui-primary-strong) !important;
    border-color: var(--ui-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24) !important;
}

:root[data-theme-mode="dark"] .bubble,
:root[data-theme-mode="dark"] .message:not(.mine),
:root[data-theme-mode="dark"] .bubble.recalled {
    background: rgba(22, 36, 31, 0.98) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

:root[data-theme-mode="dark"] .mine .bubble,
:root[data-theme-mode="dark"] .mine.message {
    background: var(--ui-primary) !important;
    color: #082018 !important;
}

:root[data-theme-mode="dark"] .mine .bubble *,
:root[data-theme-mode="dark"] .mine.message * {
    color: #082018 !important;
}

:root[data-theme-mode="dark"] .message-quote {
    background: rgba(107, 208, 166, 0.12) !important;
    border-color: rgba(107, 208, 166, 0.55) !important;
}

:root[data-theme-mode="dark"] .recall-divider span {
    background: rgba(34, 54, 48, 0.96) !important;
    color: var(--ui-muted) !important;
}

:root[data-theme-mode="dark"] .context-menu button {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] .context-menu button:hover,
:root[data-theme-mode="dark"] .target-row:hover {
    background: rgba(43, 66, 58, 0.96) !important;
}

:root[data-theme-mode="dark"] .species-filter-tab,
:root[data-theme-mode="dark"] .species-family-tab,
:root[data-theme-mode="dark"] .chip,
:root[data-theme-mode="dark"] .tag,
:root[data-theme-mode="dark"] .badge,
:root[data-theme-mode="dark"] .pill {
    background: rgba(34, 54, 48, 0.96) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] .species-filter-tab.active,
:root[data-theme-mode="dark"] .species-family-tab.active,
:root[data-theme-mode="dark"] .chip.active,
:root[data-theme-mode="dark"] .tag.active,
:root[data-theme-mode="dark"] .badge.active,
:root[data-theme-mode="dark"] .pill.active {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #082018 !important;
}

:root[data-theme-mode="dark"] .leaflet-container,
:root[data-theme-mode="dark"] #map,
:root[data-theme-mode="dark"] #distributionMap,
:root[data-theme-mode="dark"] #routeMap {
    background: #17231f !important;
}

:root[data-theme-mode="dark"] .leaflet-control,
:root[data-theme-mode="dark"] .leaflet-control a,
:root[data-theme-mode="dark"] .leaflet-popup-content-wrapper,
:root[data-theme-mode="dark"] .leaflet-popup-tip {
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    border-color: var(--ui-border) !important;
}

:root[data-theme-mode="dark"] .species-marquee {
    background: rgba(14, 28, 24, 0.96) !important;
    border-color: rgba(141, 224, 188, 0.28) !important;
}

:root[data-theme-mode="dark"] .species-marquee-item,
:root[data-theme-mode="dark"] #marqueeTrack .species-marquee-item {
    color: #f5fff9 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.42) !important;
}

:root[data-theme-mode="dark"] .species-marquee-item::after {
    color: rgba(213, 231, 223, 0.5) !important;
}

:root[data-theme-mode="dark"] svg text,
:root[data-theme-mode="dark"] #graphContainer .node text,
:root[data-theme-mode="dark"] .chart text,
:root[data-theme-mode="dark"] .charts text,
:root[data-theme-mode="dark"] .axis text,
:root[data-theme-mode="dark"] .tick text,
:root[data-theme-mode="dark"] .step text,
:root[data-theme-mode="dark"] .stepper text,
:root[data-theme-mode="dark"] .echarts text,
:root[data-theme-mode="dark"] [class*="chart"] svg text,
:root[data-theme-mode="dark"] [class*="Chart"] svg text,
:root[data-theme-mode="dark"] [class*="graph"] svg text,
:root[data-theme-mode="dark"] [class*="Graph"] svg text {
    fill: #f3fbf6 !important;
    color: #f3fbf6 !important;
}

:root[data-theme-mode="dark"] #graphContainer .node text {
    paint-order: stroke !important;
    stroke: rgba(8, 18, 15, 0.82) !important;
    stroke-width: 3px !important;
    stroke-linejoin: round !important;
    font-weight: 800 !important;
}

:root[data-theme-mode="dark"] #graphContainer .link,
:root[data-theme-mode="dark"] #graphContainer .link-tree {
    stroke-opacity: 0.72 !important;
}

:root[data-theme-mode="dark"] #graphContainer .link.level0,
:root[data-theme-mode="dark"] #graphContainer .link-tree.level0 {
    stroke: #9ce6c6 !important;
}

:root[data-theme-mode="dark"] #graphContainer .link.level1,
:root[data-theme-mode="dark"] #graphContainer .link-tree.level1 {
    stroke: #72caa5 !important;
}

:root[data-theme-mode="dark"] #graphContainer .link.level2,
:root[data-theme-mode="dark"] #graphContainer .link-tree.level2 {
    stroke: rgba(213, 231, 223, 0.68) !important;
}

:root[data-theme-mode="dark"] #graphContainer .tooltip .progress,
:root[data-theme-mode="dark"] .audit-formula {
    color: #9ce6c6 !important;
}

:root[data-theme-mode="dark"] .review-badge.pending {
    background: rgba(245, 184, 65, 0.18) !important;
    color: #ffd98a !important;
}

:root[data-theme-mode="dark"] .review-badge.approved {
    background: rgba(94, 214, 143, 0.16) !important;
    color: #a9f0c4 !important;
}

:root[data-theme-mode="dark"] .review-badge.rejected,
:root[data-theme-mode="dark"] .bird-species-item.invalid .bird-species-name,
:root[data-theme-mode="dark"] .bird-invalid-note {
    color: #ffb8b8 !important;
}

:root[data-theme-mode="dark"] .bird-species-list,
:root[data-theme-mode="dark"] .bird-species-item {
    border-color: rgba(141, 224, 188, 0.18) !important;
}

:root[data-theme-mode="dark"] .bird-species-item.invalid {
    background: rgba(232, 116, 116, 0.12) !important;
}

:root[data-theme-mode="dark"] .axis path,
:root[data-theme-mode="dark"] .axis line,
:root[data-theme-mode="dark"] .tick line,
:root[data-theme-mode="dark"] svg .grid line,
:root[data-theme-mode="dark"] [class*="chart"] svg line,
:root[data-theme-mode="dark"] [class*="Chart"] svg line {
    stroke: rgba(213, 231, 223, 0.42) !important;
}

:root[data-theme-mode="dark"] .step,
:root[data-theme-mode="dark"] .stepper,
:root[data-theme-mode="dark"] .step-row,
:root[data-theme-mode="dark"] .step-table,
:root[data-theme-mode="dark"] .chart-card,
:root[data-theme-mode="dark"] .chart-panel,
:root[data-theme-mode="dark"] [class*="chart"],
:root[data-theme-mode="dark"] [class*="Chart"],
:root[data-theme-mode="dark"] [class*="graph"],
:root[data-theme-mode="dark"] [class*="Graph"] {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] canvas {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] .banner-actions .btn-icon,
:root[data-theme-mode="dark"] #editBannerBtn {
    background: rgba(16, 30, 26, 0.96) !important;
    border-color: rgba(156, 230, 198, 0.36) !important;
    color: #f3fbf6 !important;
}

:root[data-theme-mode="dark"] .banner-actions .btn-icon *,
:root[data-theme-mode="dark"] #editBannerBtn * {
    color: #f3fbf6 !important;
}

:root[data-theme-mode="dark"] .route-mode-btn,
:root[data-theme-mode="dark"] .route-actions .btn-primary,
:root[data-theme-mode="dark"] .route-actions .btn-secondary,
:root[data-theme-mode="dark"] .route-actions .btn-danger-outline,
:root[data-theme-mode="dark"] .route-item-actions .btn-secondary,
:root[data-theme-mode="dark"] .route-item-actions .btn-danger-outline {
    color: #f3fbf6 !important;
    border-color: rgba(156, 230, 198, 0.32) !important;
}

:root[data-theme-mode="dark"] .route-mode-btn {
    background: rgba(17, 31, 27, 0.96) !important;
}

:root[data-theme-mode="dark"] .route-mode-btn strong,
:root[data-theme-mode="dark"] .route-mode-btn span,
:root[data-theme-mode="dark"] .route-actions .btn-primary *,
:root[data-theme-mode="dark"] .route-actions .btn-secondary *,
:root[data-theme-mode="dark"] .route-actions .btn-danger-outline *,
:root[data-theme-mode="dark"] .route-item-actions .btn-secondary *,
:root[data-theme-mode="dark"] .route-item-actions .btn-danger-outline * {
    color: inherit !important;
}

:root[data-theme-mode="dark"] .route-mode-btn.active,
:root[data-theme-mode="dark"] .route-actions .btn-primary {
    background: var(--ui-primary) !important;
    border-color: var(--ui-primary) !important;
    color: #082018 !important;
}

:root[data-theme-mode="dark"] .route-mode-btn.active *,
:root[data-theme-mode="dark"] .route-actions .btn-primary * {
    color: #082018 !important;
}

:root[data-theme-mode="dark"] #fullDetailPanel,
:root[data-theme-mode="dark"] .detail-grid,
:root[data-theme-mode="dark"] .species-detail,
:root[data-theme-mode="dark"] .encyclopedia-panel,
:root[data-theme-mode="dark"] [id*="DetailPanel"] {
    background: rgba(24, 37, 33, 0.94) !important;
    border-color: var(--ui-border) !important;
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] #fullDetailPanel h3,
:root[data-theme-mode="dark"] #fullDetailPanel strong,
:root[data-theme-mode="dark"] .detail-grid strong,
:root[data-theme-mode="dark"] .detail-grid .field-value,
:root[data-theme-mode="dark"] .image-credit,
:root[data-theme-mode="dark"] #imageStatus,
:root[data-theme-mode="dark"] [id*="Detail"] {
    color: var(--ui-text) !important;
}

:root[data-theme-mode="dark"] .detail-grid .field-value.empty,
:root[data-theme-mode="dark"] .carousel-track .placeholder {
    color: var(--ui-muted) !important;
}

:root[data-theme-mode="dark"] .carousel-track img {
    background-color: rgba(15, 25, 22, 0.88) !important;
}

:root[data-theme-mode="dark"] .carousel-btn {
    background: rgba(8, 16, 14, 0.72) !important;
    color: #f3fbf6 !important;
    border: 1px solid rgba(212, 231, 223, 0.24) !important;
}

:root[data-theme-mode="dark"] ::selection {
    background: rgba(107, 208, 166, 0.28);
    color: var(--ui-text);
}

:root[data-theme-mode="dark"] ::-webkit-scrollbar-track {
    background: rgba(8, 18, 15, 0.75);
}

:root[data-theme-mode="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(107, 208, 166, 0.34);
    border-color: rgba(16, 26, 23, 0.9);
}

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