.bird-modes { display: flex; align-self: stretch; gap: 20px; }
.bird-mode { border: 0; border-bottom: 2px solid transparent; background: transparent; padding: 8px 0; font-size: 12px; color: var(--text-3); white-space: nowrap; }
.bird-mode.active { border-color: var(--primary); color: var(--text); }
#bird-map-explorer { display: flex; min-height: 0; flex: 1; }
body.bird-map-mode #app { height: 100dvh; }
.bird-map-mode #bird-map-explorer { position: relative; }
.bird-map-mode #ai-searchbar { display: none !important; }
.bird-places { width: 320px; flex-shrink: 0; padding: 30px 24px; overflow-y: auto; background: var(--bg-card); border-right: 1px solid var(--atlas-line); }
.bird-places h2 { font: 34px/1.4 var(--atlas-serif); margin: 0 0 14px; letter-spacing: 2px; }
.bird-map-lead { color: var(--text-3); font-size: 12px; line-height: 1.9; }
.bird-map-stats { font-size: 12px; color: var(--text-2); padding: 16px 0 20px; }
.bird-map-search { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--atlas-line); border-radius: 5px; }
.bird-map-search span { font: 24px/1 Georgia; }
.bird-map-search input { width: 100%; min-width: 0; outline: 0; border: 0; font: inherit; font-size: 11px; background: transparent; }
.bird-place-filters { display: flex; gap: 8px; margin: 15px 0 10px; }
.bird-place-filters button { border: 0; padding: 6px 11px; border-radius: 20px; background: transparent; font-size: 11px; color: var(--text-3); }
.bird-place-filters button.active { background: var(--primary); color: white; }
#bird-map-message { font-size: 11px; line-height: 1.8; color: #8b7850; margin: 10px 0 16px; }
.bird-place { width: 100%; display: flex; gap: 13px; align-items: center; text-align: left; border: 0; border-radius: 5px; padding: 8px 0; background: transparent; color: var(--text); cursor: pointer; }
.bird-place:hover { background: var(--bg-soft); }
.bird-place img, .bird-place-placeholder { width: 82px; height: 62px; object-fit: cover; border-radius: 4px; background: var(--bg-soft); flex-shrink: 0; }
.bird-place-placeholder { display: grid; place-items: center; color: var(--text-3); }
.bird-place-info { min-width: 0; }
.bird-place-name { display: block; font: 14px/1.7 var(--atlas-serif); }
.bird-place-meta { display: block; font-size: 10px; margin-top: 4px; line-height: 1.7; color: var(--text-3); }
.bird-map-area { flex: 1; position: relative; min-width: 0; background: #e3e8df; isolation: isolate; }
#bird-explore-map { position: absolute; inset: 0; }
.bird-map-heading { position: absolute; left: 24px; top: 24px; z-index: 500; color: var(--text); pointer-events: none; background: #fbfaf6df; padding: 9px 13px; border-radius: 4px; font-size: 12px; }
.bird-map-heading small { display: block; font-size: 10px; color: var(--text-3); margin-top: 3px; }
.bird-map-tools { position: absolute; right: 18px; top: 24px; display: flex; gap: 6px; z-index: 500; }
.bird-map-tools button { background: var(--bg-card); padding: 8px 12px; border: 1px solid var(--atlas-line); border-radius: 20px; font-size: 11px; color: var(--text); box-shadow: var(--shadow); }
.bird-map-note { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 500; padding: 9px 14px; margin: 0; background: #fbfaf6e8; border-radius: 4px; color: var(--text-2); font-size: 10px; width: max-content; max-width: 85%; text-align: center; }
.bird-pin { border: 0; background: transparent; }
.bird-pin-body { width: 92px; padding: 4px; background: var(--bg-card); border: 1px solid white; border-radius: 5px; box-shadow: 0 4px 16px #1a352b45; position: relative; }
.bird-pin-body img { width: 82px; height: auto; aspect-ratio: 3/4; border-radius: 3px; object-fit: cover; display: block; }
.bird-pin-label { display:flex; align-items:center; padding-top:4px; font:10px/1.7 "Microsoft YaHei",sans-serif; }
.bird-pin-name { min-width:0; flex:1; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.bird-pin-suffix { flex-shrink:0; white-space:nowrap; }
.bird-pin-placeholder { width:82px; aspect-ratio:3/4; display:grid; place-items:center; background:var(--bg-soft); color:var(--text-3); border-radius:3px; }
.bird-cluster-list { max-width:290px; max-height:320px; overflow-y:auto; overscroll-behavior:contain; color:var(--text); }
.bird-cluster-list strong { display:block; font-size:12px; margin-bottom:8px; }
.bird-cluster-list button { display:block; width:100%; text-align:left; border:0; background:var(--bg-card); padding:9px 7px; color:var(--text); font:12px/1.7 "Microsoft YaHei",sans-serif; white-space:normal; overflow-wrap:anywhere; cursor:pointer; }
.bird-cluster-list button:hover { background:var(--bg-soft); }
.bird-cluster-list .bird-cluster-zoom { color:var(--primary); border-bottom:1px solid var(--atlas-line); }
.bird-pin-body b { position: absolute; right: -5px; top: -8px; color: white; background: var(--primary); padding: 3px 7px; border: 2px solid white; border-radius: 15px; font: 10px/1.3 system-ui; }
.atlas-map-zoom { position: absolute; right: 18px; top: 86px; z-index: 510; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.atlas-map-zoom button { width: 33px; height: 33px; background: var(--bg-card); border: 1px solid var(--atlas-line); font-size: 22px; color: var(--primary); }
#map-error { position: absolute; left: 22px; bottom: 75px; z-index: 500; max-width: 85%; background: #fff6dc; font-size: 11px; padding: 10px 14px; }
#bird-place-gallery { width: min(1120px, 93vw); max-height: 90dvh; padding: 28px; border: 0; border-radius: 8px; background: var(--bg); color: var(--text); overflow-y: auto; }
#bird-place-gallery::backdrop { background: #13271fd9; backdrop-filter: blur(3px); }
.bird-gallery-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.bird-gallery-head h2 { font: 28px/1.5 var(--atlas-serif); margin: 0; }
.bird-gallery-head p, #bird-place-aliases { color: var(--text-3); font-size: 11px; line-height: 1.8; }
#bird-place-close { width: 36px; height: 36px; flex-shrink: 0; border: 1px solid var(--atlas-line); border-radius: 50%; background: transparent; font-size: 24px; }
.bird-gallery-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px 0 23px; font-size: 11px; }
.bird-gallery-tools select { background: var(--bg-card); border: 1px solid var(--atlas-line); border-radius: 16px; padding: 6px 12px; max-width: 220px; margin-left: 10px; }
#bird-map-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 20px 16px; }
.bird-map-photo { text-align: left; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--text); }
.bird-map-photo img, .bird-map-photo video { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: 4px; background: var(--bg-soft); }
.bird-map-photo span { display: block; font: 14px/1.8 var(--atlas-serif); margin-top: 7px; }
.bird-map-photo small { display: block; color: var(--text-3); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#bird-map-more { display: block; margin: 24px auto 0; }
.bird-species-tools { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
#bird-intro-dialog { width:min(720px,92vw); max-height:85dvh; overflow-y:auto; padding:28px; border:0; border-radius:8px; background:var(--bg-card); color:var(--text); }
#bird-intro-dialog::backdrop { background:#13271fc9; backdrop-filter:blur(3px); }
#bird-intro-close { border:1px solid var(--atlas-line); border-radius:50%; width:36px; height:36px; background:transparent; color:var(--text); font-size:24px; flex-shrink:0; }
#bird-intro-content { line-height:1.9; margin-top:20px; font-size:14px; overflow-wrap:anywhere; }
#bird-lightbox-info { position:absolute; right:0; top:0; bottom:0; width:340px; padding:28px 24px; overflow-y:auto; background:var(--bg-card); color:var(--text); border-left:1px solid var(--atlas-line); }
#bird-lightbox-info h2 { font:25px/1.6 var(--atlas-serif); margin:0 42px 8px 0; }
#bird-lightbox-info h3 { font-size:13px; margin:26px 0 12px; color:var(--primary); }
.bird-info-file { font-size:11px; line-height:1.8; color:var(--text-3); overflow-wrap:anywhere; }
#bird-lightbox-info .ai-field { font-size:12px; line-height:1.8; padding:6px 0; gap:12px; }
#bird-lightbox-info .label { min-width:58px; flex-shrink:0; color:var(--text-3); }
#bird-lightbox-info .value { overflow-wrap:anywhere; }
.bird-info-description { white-space:pre-wrap; font-size:13px; line-height:1.9; overflow-wrap:anywhere; }
.bird-map-lightbox #lightbox-stage { right:340px; }
.bird-map-lightbox .lightbox-zoom { left:calc((100% - 340px)/2); }
.bird-map-lightbox .lightbox-close { background:var(--primary); width:34px; height:34px; top:24px; right:20px; }
#bird-lightbox-nav { display:flex; align-items:center; gap:10px; border-left:1px solid #ffffff40; padding-left:12px; color:white; font-size:12px; }
#bird-lightbox-nav button { white-space:nowrap; padding:6px 10px; border:0; border-radius:14px; color:white; background:#ffffff29; font:inherit; cursor:pointer; }
#bird-lightbox-nav button:disabled { opacity:.35; cursor:default; }
#bird-photo-position { white-space:nowrap; }
@media(max-width:760px) {
  .bird-map-lightbox #lightbox-stage { right:0; bottom:38dvh; }
  #bird-lightbox-info { top:62dvh; width:100%; padding:20px; border-left:0; border-top:1px solid var(--atlas-line); }
  .bird-map-lightbox .lightbox-zoom { left:50%; bottom:calc(38dvh + 12px); gap:6px; padding:8px; max-width:98vw; }
  #bird-lightbox-nav { gap:5px; padding-left:6px; } #bird-lightbox-nav button { padding:6px; }
}
@media(max-width: 1000px) { .bird-places { width: 270px; padding: 25px 18px; } .bird-map-tools { top: 96px; left: 20px; right: auto; flex-wrap: wrap; } .atlas-map-zoom { top: 155px; } }
@media(max-width: 760px) { .bird-modes { order: 4; width: 100%; gap: 24px; } #bird-map-explorer { flex-direction: column-reverse; overflow-y: auto; } .bird-map-area { min-height: 55dvh; flex-shrink: 0; } .bird-places { width: 100%; overflow: visible; border-right: 0; } .bird-map-heading { top: 16px; left: 16px; } .bird-map-tools { top: 82px; left: 16px; } .bird-map-note { font-size: 9px; } #bird-place-gallery { padding: 20px; } #bird-map-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px 12px; } }

/* Only the body scrolls; close controls remain in the stationary modal header. */
#bird-place-gallery, #bird-intro-dialog { overflow:hidden; }
#bird-place-gallery[open], #bird-intro-dialog[open] { display:flex; flex-direction:column; }
#bird-place-gallery { height:90dvh; }
#bird-place-gallery > .bird-gallery-head, #bird-intro-dialog > .bird-gallery-head { flex-shrink:0; padding-bottom:12px; }
.bird-dialog-body, #bird-intro-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.bird-dialog-body { flex:1; }
#bird-place-gallery .bird-gallery-head h2 { padding-right:10px; }
.bird-grid-spacer { grid-column:1/-1; pointer-events:none; }
.bird-map-photo { min-width:0; overflow:hidden; }
.bird-map-photo span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#bird-map-more { text-align:center; font-size:12px; color:var(--text-3); }
.bird-map-lightbox { background:var(--bg); }
.bird-map-lightbox #lightbox-stage { background:#eeeee6; }
.bird-map-lightbox #lightbox-img { box-shadow:0 8px 35px #30483a24; }
#bird-lightbox-video { width:100%; height:calc(100% - 85px); object-fit:contain; position:absolute; top:0; left:0; }
.bird-map-video .lightbox-zoom > :is(#zoom-in,#zoom-out,#zoom-pct) { display:none; }
body.bird-map-mode :is(#btn-gen-md,#btn-recognize,#btn-batch-time,#btn-batch-location,#btn-batch-intro,#stat-pending,#stat-confirm) { display:none !important; }
.bird-place-title-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
#bird-edit-place { display:none; }
body.edit-mode #bird-edit-place { display:inline-block; }
#bird-place-editor { width:min(1100px,94vw); height:85dvh; max-height:90dvh; border:0; border-radius:8px; padding:24px; background:var(--bg-card); color:var(--text); overflow:hidden; }
#bird-place-editor[open] { display:flex; flex-direction:column; gap:14px; }
#bird-place-editor::backdrop { background:#24372cbf; }
#bird-place-editor h2 { font:24px/1.5 var(--atlas-serif); margin:0 0 12px; }
.bird-editor-search { display:flex; gap:10px; }
#bird-editor-name { flex:1; min-width:0; background:var(--bg); padding:10px 12px; border:1px solid var(--atlas-line); border-radius:4px; font:inherit; }
.bird-editor-body { display:flex; flex:1; min-height:0; gap:16px; }
#bird-editor-results { width:260px; flex-shrink:0; overflow-y:auto; }
#bird-editor-results button { display:block; width:100%; text-align:left; border:1px solid var(--atlas-line); background:var(--bg); padding:12px; margin-bottom:9px; border-radius:4px; color:var(--text); }
#bird-editor-results button.active { border-color:var(--primary); background:var(--bg-soft); }
#bird-editor-results small { display:block; color:var(--text-3); font-size:11px; margin-top:6px; line-height:1.6; }
#bird-editor-map { flex:1; min-width:0; background:#eeeee6; }
#bird-editor-status { font-size:12px; margin:0; min-height:20px; }
#bird-place-editor footer { display:flex; justify-content:flex-end; gap:12px; }
#bird-editor-save:disabled { opacity:.4; cursor:default; }
@media(max-width:760px) { #bird-place-editor { padding:16px; } .bird-editor-body { flex-direction:column-reverse; } #bird-editor-map { min-height:30dvh; } #bird-editor-results { width:100%; max-height:20dvh; } }
