/*
 * BASE FONT SIZE — change this one value to scale the entire UI.
 * 16px = default browser size. Try 17px or 18px to go larger.
 */
html { font-size: 16px; }

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

/* ── LIGHT MODE TOKENS ─────────────────────────────────────────────────────── */
:root{
  --sage:#3d5c35;--sage-light:#e8f0e7;--sage-mid:#7a9e72;--sage-dark:#28402b;
  --ink:#1c1f1a;--paper:#faf9f7;--cream:#f5f3ef;
  --border:rgba(61,92,53,0.14);
  --font-serif:'Nunito Sans',sans-serif;
  --font-sans:'Nunito Sans',sans-serif;
  --thumb-size:3.75rem;
  --list-bg:white;--list-header-bg:white;--list-border:var(--border);
  --row-hover:rgba(61,92,53,0.055);--row-sel:var(--sage-light);
  --order-hd-color:var(--sage-mid);--order-count-color:rgba(28,31,26,0.35);
  --topbar-bg:white;--topbar-border:var(--border);
  --search-bg:var(--cream);--search-border:rgba(61,92,53,0.18);
  --search-color:var(--ink);--search-placeholder:rgba(28,31,26,0.35);
  --detail-bg:var(--cream);--detail-border:var(--border);
  --meta-label-color:rgba(28,31,26,0.4);--meta-val-color:var(--ink);
  --loc-hd-color:rgba(28,31,26,0.45);--loc-item-color:var(--ink);
  --ebird-bg:white;--ebird-color:var(--sage);
  --chart-center-fill:#f5f3ef;
  --placeholder-bg:var(--cream);--placeholder-color:rgba(28,31,26,0.28);
  --sort-btn-color:var(--ink);--sort-btn-bg:transparent;--sort-btn-border:var(--border);
  --sort-btn-on-bg:var(--sage-light);--sort-btn-on-color:var(--sage);
  --detail-close-bg:white;--detail-close-border:var(--border);--detail-close-color:rgba(28,31,26,0.5);
  --mark-btn-color:var(--sage);--mark-btn-border:var(--sage);
  --section-hd-color:rgba(28,31,26,0.65);
  --empty-color:rgba(28,31,26,0.32);
  --bsci-color:rgba(28,31,26,0.4);
  --sidebar-bg:#28402b;
  --badge-sy-bg:#e8f2e6;--badge-sy-color:#2e5428;
  --badge-ss-bg:#fff4e0;--badge-ss-color:#7a4e00;
  --badge-sw-bg:#e3eff7;--badge-sw-color:#1a4572;
  --badge-sm-bg:#f3e8f7;--badge-sm-color:#5a2d7a;
  --badge-r1-bg:#f0f8ec;--badge-r1-color:#2e6020;
  --badge-r2-bg:#fff4e0;--badge-r2-color:#7a4400;
  --badge-r3-bg:#fdedf0;--badge-r3-color:#8a2040;
  --badge-r4-bg:#f5eafa;--badge-r4-color:#6b21a8;
  --badge-bext-bg:#f0e8f7;--badge-bext-color:#5a2070;
  --badge-bint-bg:#e8f4fe;--badge-bint-color:#1a4a7a;
  --badge-bsight-bg:#fef9e8;--badge-bsight-color:#7a5a00;
  /* Conservation status badges */
  --badge-endangered-bg:#fdedf0;--badge-endangered-color:#8a1020;
  --badge-threatened-bg:#fff0e0;--badge-threatened-color:#8a3800;
  --badge-concern-bg:#fef4d8;--badge-concern-color:#7a5200;
  --badge-sensitive-bg:#f2e8f7;--badge-sensitive-color:#5a1a7a;
}

/* ── DARK MODE TOKENS ──────────────────────────────────────────────────────── */
[data-theme="dark"]{
  --ink:#e8ece6;--paper:#141814;--cream:#1a1e19;
  --border:rgba(255,255,255,0.1);
  --sage-light:rgba(61,92,53,0.25);
  --list-bg:#1a1e19;--list-header-bg:#1a1e19;--list-border:rgba(255,255,255,0.08);
  --row-hover:rgba(255,255,255,0.04);--row-sel:rgba(61,92,53,0.3);
  --order-hd-color:#7a9e72;--order-count-color:rgba(255,255,255,0.3);
  --topbar-bg:#141814;--topbar-border:rgba(255,255,255,0.08);
  --search-bg:rgba(255,255,255,0.06);--search-border:rgba(255,255,255,0.12);
  --search-color:#e8ece6;--search-placeholder:rgba(255,255,255,0.3);
  --detail-bg:#1e2420;--detail-border:rgba(255,255,255,0.09);
  --meta-label-color:rgba(255,255,255,0.38);--meta-val-color:#e8ece6;
  --loc-hd-color:rgba(255,255,255,0.38);--loc-item-color:#e8ece6;
  --ebird-bg:rgba(255,255,255,0.06);--ebird-color:#7a9e72;
  --chart-center-fill:#1a1e19;
  --placeholder-bg:#1a1e19;--placeholder-color:rgba(255,255,255,0.18);
  --sort-btn-color:#e8ece6;--sort-btn-bg:transparent;--sort-btn-border:rgba(255,255,255,0.12);
  --sort-btn-on-bg:rgba(61,92,53,0.35);--sort-btn-on-color:#7a9e72;
  --detail-close-bg:rgba(255,255,255,0.07);--detail-close-border:rgba(255,255,255,0.12);--detail-close-color:rgba(255,255,255,0.5);
  --mark-btn-color:#7a9e72;--mark-btn-border:#7a9e72;
  --section-hd-color:rgba(255,255,255,0.6);
  --empty-color:rgba(255,255,255,0.25);
  --bsci-color:rgba(255,255,255,0.35);
  --sidebar-bg:#1a2e1c;
  --badge-sy-bg:rgba(46,84,40,0.35);--badge-sy-color:#90c884;
  --badge-ss-bg:rgba(122,78,0,0.3);--badge-ss-color:#e8b96a;
  --badge-sw-bg:rgba(26,69,114,0.3);--badge-sw-color:#7ab4de;
  --badge-sm-bg:rgba(90,45,122,0.3);--badge-sm-color:#c89ee8;
  --badge-r1-bg:rgba(46,96,32,0.3);--badge-r1-color:#90c87a;
  --badge-r2-bg:rgba(122,68,0,0.3);--badge-r2-color:#e8b96a;
  --badge-r3-bg:rgba(138,32,64,0.25);--badge-r3-color:#e8909a;
  --badge-r4-bg:rgba(107,33,168,0.3);--badge-r4-color:#c89ee8;
  --badge-bext-bg:rgba(90,32,112,0.3);--badge-bext-color:#c89ee8;
  --badge-bint-bg:rgba(26,74,122,0.3);--badge-bint-color:#7ab4de;
  --badge-bsight-bg:rgba(122,90,0,0.3);--badge-bsight-color:#e8d06a;
  /* Conservation status badges */
  --badge-endangered-bg:rgba(138,16,32,0.28);--badge-endangered-color:#f08090;
  --badge-threatened-bg:rgba(138,56,0,0.28);--badge-threatened-color:#f0a870;
  --badge-concern-bg:rgba(122,82,0,0.28);--badge-concern-color:#e8c870;
  --badge-sensitive-bg:rgba(90,26,122,0.28);--badge-sensitive-color:#c89ae8;
}

body{height:100%;font-family:var(--font-sans);font-size:1rem;background:var(--paper);color:var(--ink);overflow:hidden}
html,body{height:100%}

/* ── LAYOUT ─────────────────────────────────────────────────────────────────── */
.app{display:grid;grid-template-columns:17rem 1fr;height:100vh}
.main{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr 22rem;overflow:hidden;height:100vh;position:relative}
.top-bar{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:0.625rem;padding:0.5625rem 1rem;background:var(--topbar-bg);border-bottom:1px solid var(--topbar-border);flex-shrink:0;z-index:2}
.list-panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--list-border);grid-row:2}
.detail-placeholder{grid-row:2}

/* ── TOP BAR ────────────────────────────────────────────────────────────────── */
.topbar-search-wrap{position:relative;display:flex;align-items:center;flex:1;max-width:24rem}
.topbar-search{width:100%;background:var(--search-bg);border:1px solid var(--search-border);border-radius:0.4375rem;padding:0.4375rem 2rem 0.4375rem 0.625rem;color:var(--search-color);font-family:var(--font-sans);font-size:0.875rem;outline:none;transition:border-color 0.15s}
.topbar-search::placeholder{color:var(--search-placeholder)}
.topbar-search:focus{border-color:var(--sage-mid)}
.topbar-clear{position:absolute;right:0.4rem;background:transparent;border:none;color:var(--search-placeholder);cursor:pointer;font-size:0.75rem;line-height:1;padding:0.25rem;transition:color 0.15s}
.topbar-clear:hover{color:var(--ink)}
.topbar-filter-stat{font-size:0.75rem;color:var(--bsci-color);white-space:nowrap}
.topbar-filter-stat strong{color:var(--ink);font-weight:600}
.topbar-spacer{flex:1}
.topbar-title{display:none;flex-direction:column;line-height:1.15;flex-shrink:0}
.topbar-logo{font-size:0.5rem;letter-spacing:0.22em;text-transform:uppercase;opacity:0.6;color:rgba(255,255,255,0.75)}
.topbar-name{font-family:var(--font-serif);font-size:1rem;font-weight:700;color:white;line-height:1}
@media (max-width:1023px){.topbar-title{display:flex}}
.dark-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--topbar-border);border-radius:0.375rem;background:transparent;cursor:pointer;color:var(--ink);flex-shrink:0;transition:all 0.15s}
.dark-toggle:hover{background:var(--row-hover)}

/* ── SIDEBAR OVERLAY ────────────────────────────────────────────────────────── */
.sb-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:20}
.sb-scrim.open{display:block}
.sb-menu-btn{display:none;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--topbar-border);border-radius:0.375rem;background:transparent;cursor:pointer;flex-shrink:0;color:var(--ink)}
.sb-menu-btn svg{display:block}
.sb-close-btn{display:none;align-self:flex-end;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid rgba(255,255,255,0.2);background:transparent;color:rgba(255,255,255,0.7);cursor:pointer;font-size:1rem;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:-0.25rem}

/* ── PLACEHOLDER ────────────────────────────────────────────────────────────── */
.detail-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--placeholder-bg);color:var(--placeholder-color);padding:2rem;text-align:center}
.detail-placeholder svg{opacity:1}
.detail-placeholder-txt{font-family:var(--font-sans);font-size:1rem;line-height:1.55;max-width:12rem}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */
/* On desktop, search lives in sidebar — hide entire top bar */
@media (min-width:1024px) {
  .top-bar{display:none}
  .main{grid-template-rows:1fr}
  .list-panel{grid-row:1}
  .detail-placeholder{grid-row:1}
}
@media (max-width:1023px) {
  .sb-search-wrap{display:none}
  .topbar-search-wrap{flex:0 0 auto;margin-left:auto}
  .topbar-spacer{display:none}
  .app{grid-template-columns:1fr}
  .main{grid-template-columns:1fr}
  .detail-placeholder{display:none}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:17rem;z-index:21;transform:translateX(-100%);visibility:hidden;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0.28s}
  .sidebar.open{transform:translateX(0);visibility:visible;transition:transform 0.28s cubic-bezier(0.4,0,0.2,1),visibility 0s linear 0s}
  .sb-close-btn{display:flex}
  .sb-menu-btn{display:flex}
  .detail{width:min(28rem,90vw)}
  /* Top bar takes on sidebar colors on mobile/tablet */
  .top-bar{background:#28402b;border-bottom-color:rgba(255,255,255,0.1)}
  .topbar-search{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.18);color:white}
  .topbar-search::placeholder{color:rgba(255,255,255,0.38)}
  .topbar-search:focus{background:rgba(255,255,255,0.18);border-color:rgba(255,255,255,0.4)}
  .topbar-clear{color:rgba(255,255,255,0.45)}
  .topbar-clear:hover{color:white}
  .topbar-filter-stat{color:rgba(255,255,255,0.55)}
  .topbar-filter-stat strong{color:white}
  .dark-toggle{border-color:rgba(255,255,255,0.2);color:white}
  .dark-toggle:hover{background:rgba(255,255,255,0.1)}
  .sb-menu-btn{border-color:rgba(255,255,255,0.2);color:white}
}
@media (max-width:639px) {
  body{overflow:hidden}
  .list-header{padding:0.5rem 0.75rem;gap:0.375rem}
  .list-title{font-size:0.875rem}
  .sort-bar{display:none}
  .sort-select{display:block}
  .bird-scroll{padding:0 0 1rem}
  .bird-row{gap:0.375rem;padding:0.4375rem 0.125rem}
  .detail{width:100%;max-width:100%}
  .detail-scrim{background:rgba(0,0,0,0.25)}

  .topbar-filter-stat{display:none}
}

/* ── SIDEBAR ────────────────────────────────────────────────────────────────── */
.sidebar{background:var(--sidebar-bg);color:white;padding:0;display:flex;flex-direction:column;gap:0;overflow-y:auto}
.sb-logo{font-size:0.625rem;letter-spacing:0.22em;text-transform:uppercase;opacity:0.5;margin-bottom:0.25rem}
.sb-title{font-family:var(--font-serif);font-size:1.375rem;line-height:1.2;color:white}
.sb-divider{display:none}
/* Header */
.sb-head{padding:16px 16px 14px}
/* Multi-list selector — no border-bottom */
.sb-list-selector{padding:0 16px 14px}
.sb-list-tabs{display:flex;gap:4px;background:rgba(255,255,255,0.06);border-radius:8px;padding:3px}
.sb-list-tab{flex:1;padding:6px 4px;border-radius:6px;border:none;background:transparent;color:rgba(200,216,192,0.55);font-family:var(--font-sans);font-size:0.75rem;cursor:pointer;text-align:center;transition:all 0.15s;white-space:nowrap}
.sb-list-tab:hover{color:rgba(200,216,192,0.85)}
.sb-list-tab.active{background:rgba(168,196,160,0.22);color:#c8d8c0;font-weight:500}
/* Sidebar search — below stats, clear separation via padding not borders */
.sb-search-wrap{padding:16px 16px 14px;border-top:none;border-bottom:none}
.sb-search-label{font-size:0.875rem;color:rgba(200,216,192,0.6);letter-spacing:0.06em;text-transform:uppercase;margin-bottom:7px;font-weight:700}
.sb-search-inner{position:relative;display:flex;align-items:center}
.sb-search{width:100%;background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.12);border-radius:7px;padding:7px 32px 7px 10px;color:rgba(200,216,192,0.9);font-family:var(--font-sans);font-size:0.875rem;outline:none;transition:border-color 0.15s}
.sb-search::placeholder{color:rgba(200,216,192,0.35)}
.sb-search:focus{border-color:rgba(168,196,160,0.5)}
.sb-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:rgba(200,216,192,0.4);cursor:pointer;font-size:0.75rem;padding:4px;line-height:1;display:flex;align-items:center;justify-content:center}
.sb-search-clear:hover{color:rgba(200,216,192,0.9)}
.pct-label{font-size:0.75rem;opacity:0.55}
.sb-search-stat{font-size:0.75rem;color:rgba(200,216,192,0.45);margin-top:8px}
/* Progress — no border-bottom */
.sb-progress{padding:16px 16px 14px}
.progress-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.progress-label{font-size:0.875rem;color:rgba(200,216,192,0.6);letter-spacing:0.01em}
.progress-count{font-size:0.875rem;color:#a8c4a0;font-variant-numeric:tabular-nums;font-weight:500}
.progress-bar{height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-bottom:14px}
.progress-bar:last-of-type{margin-bottom:0}
.progress-fill{height:100%;background:linear-gradient(90deg,#6b8f62,#a8c4a0);border-radius:2px}
/* Keep old prog-* aliases */
.prog-label{font-size:0.875rem;color:rgba(200,216,192,0.6)}
.prog-count{font-size:0.875rem;color:#a8c4a0;font-variant-numeric:tabular-nums}
.prog-track{height:4px;background:rgba(255,255,255,0.08);border-radius:2px;overflow:hidden;margin-bottom:14px}
.prog-fill{height:100%;background:linear-gradient(90deg,#6b8f62,#a8c4a0);border-radius:2px}
.prog-foot{display:none}
.prog-denom{font-size:0.875rem;color:#a8c4a0}
/* Filter section heading — larger, matches progress label color */
.sb-filter-hd{font-size:0.875rem;color:rgba(200,216,192,0.6);letter-spacing:0.06em;margin-bottom:4px;margin-top:0;text-transform:uppercase;font-weight:700}
/* Filters — no overflow, sidebar itself scrolls */
.sb-filters{padding:10px 16px;flex-shrink:0}
.sb-section-hd{font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;color:rgba(200,216,192,0.4);margin-bottom:4px;margin-top:16px}
.sb-section-hd:first-child{margin-top:4px}
.sb-chip{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:6px;margin-bottom:2px;cursor:pointer;font-size:0.875rem;color:rgba(200,216,192,0.7);transition:background 0.12s;width:100%;background:transparent;border:none;text-align:left;font-family:var(--font-sans)}
.sb-chip:hover{background:rgba(255,255,255,0.06)}
.sb-chip.active{background:rgba(168,196,160,0.18);color:#c8d8c0}
.sb-chip-dot{width:0.5rem;height:0.5rem;border-radius:50%;flex-shrink:0}
.sb-chip-count{margin-left:auto;font-size:0.75rem;color:rgba(200,216,192,0.35)}
.sb-chip.active .sb-chip-count{color:rgba(200,216,192,0.6)}
/* Reset */
.reset-filters-btn{font-size:0.625rem;padding:2px 8px;border-radius:99px;border:1px solid rgba(255,255,255,0.25);background:transparent;color:rgba(255,255,255,0.5);font-family:var(--font-sans);cursor:pointer;transition:all 0.15s}
.reset-filters-btn:hover{background:rgba(255,255,255,0.1);color:white}
/* Dark toggle in footer */
/* Footer */
.sb-footer{padding:14px 16px 12px;}
.sb-btns{display:grid;grid-template-columns:repeat(3, 1fr);gap:12px;margin-bottom:24px}
.sb-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 6px 8px;border-radius:7px;border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.04);color:rgba(200,216,192,0.6);font-family:var(--font-sans);font-size:0.75rem;cursor:pointer;text-align:center;transition:all 0.15s;width:100%;line-height:1.2}
.sb-btn:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.18);color:rgba(200,216,192,0.95)}
.sb-btn.active{background:rgba(90,138,80,0.25);border-color:rgba(90,138,80,0.5);color:#c8d8c0}
.achievement-toast{padding:12px 34px 12px 14px;border-radius:10px;background:#1a2318;border:1px solid rgba(255,255,255,0.14);box-shadow:0 8px 32px rgba(0,0,0,0.5);pointer-events:all;opacity:0;transform:translateY(12px);transition:opacity 0.3s,transform 0.3s;font-family:var(--font-sans,sans-serif);color:#c8d8c0;position:relative}
.achievement-toast--visible{opacity:1;transform:translateY(0)}
.achievement-toast--secret{border-color:rgba(255,255,255,0.18);background:#1e2420}
.achievement-toast-inner{display:flex;flex-direction:column;gap:3px}
.achievement-toast-eyebrow{font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;opacity:0.45}
.achievement-toast-title{display:flex;align-items:center;gap:7px}
.achievement-toast-emoji{font-size:1.125rem;line-height:1;flex-shrink:0}
.achievement-toast-name{font-size:0.875rem;font-weight:600;color:#e0ead8}
.achievement-toast-desc{font-size:0.75rem;opacity:0.6;line-height:1.45;padding-left:25px}
.achievement-toast-close{position:absolute;top:8px;right:10px;background:none;border:none;color:rgba(200,216,192,0.35);cursor:pointer;font-size:0.875rem;padding:0;line-height:1}
.achievement-toast-close:hover{color:rgba(200,216,192,0.8)}
.ach-list{display:flex;flex-direction:column;gap:18px}
.ach-section-hd{font-size:0.75rem;letter-spacing:0.08em;text-transform:uppercase;padding:10px 2px 0;margin-top:4px}
.ach-section-hd:first-child{margin-top:0}
.ach-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06)}
.ach-row--done{background:rgba(90,138,80,0.15);border-color:rgba(90,138,80,0.4)}
.ach-row--hidden{opacity:0.45}
.ach-row-emoji{font-size:1.25rem;line-height:1;flex-shrink:0}
.ach-row-body{flex:1;min-width:0}
.ach-row-name{font-size:1rem;font-weight:600;color:#e0ead8}
.ach-check{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#5a8a50;color:#fff;flex-shrink:0}
.ach-check svg{display:block}
.ach-secret-badge{font-size:0.625rem;background:rgba(255,255,255,0.08);color:rgba(200,216,192,0.6);border:1px solid rgba(255,255,255,0.14);border-radius:4px;padding:1px 5px;font-weight:500;letter-spacing:0.03em;vertical-align:middle;margin-left:4px}
.ach-row-desc{font-size:0.875rem;opacity:0.55;line-height:1.45}
.ach-toggle-note{font-size:0.75rem;opacity:0.55;line-height:1.5;padding:8px 10px;background:rgba(90,138,80,0.1);border:1px solid rgba(90,138,80,0.2);border-radius:6px;margin-bottom:8px}
.sb-btn-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.sb-btn-label{white-space:nowrap}
.sb-dark-toggle{display:flex;align-items:center;justify-content:center;gap:7px;padding:7px 10px;border-radius:7px;border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.04);color:rgba(200,216,192,0.6);font-family:var(--font-sans);font-size:0.75rem;cursor:pointer;transition:all 0.15s;width:100%}
.sb-dark-toggle:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.18);color:rgba(200,216,192,0.95)}
.sb-dark-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:1}
.hash-banner{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.22);border-radius:0.4375rem;padding:0.625rem 0.75rem;font-size:0.75rem;line-height:1.55}
.hash-banner strong{display:block;margin-bottom:0.1875rem;font-size:0.875rem}
.hash-btn{margin-top:0.5rem;width:100%;padding:0.4375rem;border-radius:0.375rem;background:white;color:var(--sage-dark);border:none;font-family:var(--font-sans);font-size:0.75rem;font-weight:500;cursor:pointer}
.sb-about{font-size:0.75rem;opacity:0.35;line-height:1.6;margin-top:0.75rem}
/* Target/Chase hidden for JS compat */
.target-btn{display:none}
.target-count{display:none}
.target-label{display:none}
.target-arrow{display:none}
.sb-section{padding:14px 16px}

/* ── LIST PANEL ─────────────────────────────────────────────────────────────── */
.list-header{background:var(--list-header-bg);border-bottom:1px solid var(--list-border);padding:0.6875rem 0.75rem;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:0.625rem}
.list-title{font-family:var(--font-sans);font-size:0.875rem;color:var(--sage);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sort-bar{display:flex;gap:0.1875rem;flex-shrink:0}
.sort-btn{padding:0.3125rem 0.625rem;border-radius:0.3125rem;border:1px solid var(--sort-btn-border);background:var(--sort-btn-bg);font-size:0.75rem;cursor:pointer;font-family:var(--font-sans);color:var(--sort-btn-color);transition:all 0.15s}
.sort-btn:hover{background:var(--sort-btn-on-bg)}
.sort-btn.on{background:var(--sort-btn-on-bg);border-color:var(--sage-mid);color:var(--sort-btn-on-color);font-weight:500}
.sort-select{display:none;padding:0.3125rem 0.5rem;border-radius:0.3125rem;border:1px solid var(--sort-btn-border);background:var(--list-bg);font-size:0.75rem;font-family:var(--font-sans);color:var(--ink);cursor:pointer;outline:none}
.bird-scroll{overflow-y:auto;flex:1;background:var(--list-bg)}
.order-hd{display:flex;align-items:baseline;justify-content:space-between;padding:0.5rem 0.75rem;background:rgba(0,0,0,0.02)}
.order-hd-name{font-family:var(--font-sans);font-size:0.75rem;color:var(--ink);letter-spacing:0.06em;text-transform:uppercase}
.order-hd-count{font-size:0.625rem;color:var(--order-count-color);white-space:nowrap}

/* ── BIRD ROW ────────────────────────────────────────────────────────────────── */
.bird-row{display:grid;grid-template-columns:1.125rem var(--thumb-size) 1fr auto;align-items:center;padding:1rem;border-bottom:1px solid rgba(61,92,53,0.065);gap:0.75rem;cursor:pointer;transition:background 0.1s}
.bird-row:last-child{border-bottom:0}
[data-theme="dark"] .bird-row{border-top-color:rgba(255,255,255,0.05)}
.bird-row:hover{background:var(--row-hover)}
.bird-row.sel{background:var(--row-sel)!important}

.bcheck{width:1.125rem;height:1.125rem;border-radius:50%;border:1.5px solid rgba(61,92,53,0.25);flex-shrink:0;position:relative;cursor:pointer;transition:all 0.15s}
[data-theme="dark"] .bcheck{border-color:rgba(255,255,255,0.2)}
.bcheck.on{background:var(--sage);border-color:var(--sage)}
.bcheck.on::after{content:'';position:absolute;left:0.25rem;top:0.0625rem;width:0.25rem;height:0.5rem;border:2px solid white;border-top:none;border-left:none;transform:rotate(42deg)}
.bcheck.readonly{cursor:default;opacity:0.6}

.bthumb{width:var(--thumb-size);height:var(--thumb-size);border-radius:0.3125rem;overflow:hidden;flex-shrink:0;background:#c8d8c4}
[data-theme="dark"] .bthumb{background:#2a3828}
.bthumb img{width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity 0.3s}
.bthumb img.loaded{opacity:1}

.binfo{min-width:0}
.bname{font-size:1rem;font-weight:500;color:var(--ink);line-height:1.2}
.bsci{font-size:0.875rem;color:var(--bsci-color);font-style:italic;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}

.bmeta{display:flex;flex-direction:row;align-items:center;gap:0.25rem;flex-shrink:0;flex-wrap:nowrap}
.badge{font-size:0.625rem;padding:0.125rem 0.4375rem;border-radius:99px;font-weight:500;white-space:nowrap;font-family:var(--font-sans)}
.sy{background:var(--badge-sy-bg);color:var(--badge-sy-color)}
.ss{background:var(--badge-ss-bg);color:var(--badge-ss-color)}
.sw{background:var(--badge-sw-bg);color:var(--badge-sw-color)}
.sm{background:var(--badge-sm-bg);color:var(--badge-sm-color)}
.r1{background:var(--badge-r1-bg);color:var(--badge-r1-color)}
.r2{background:var(--badge-r2-bg);color:var(--badge-r2-color)}
.r3{background:var(--badge-r3-bg);color:var(--badge-r3-color)}
.r4{background:var(--badge-r4-bg);color:var(--badge-r4-color)}
.bext{background:var(--badge-bext-bg);color:var(--badge-bext-color)}
.bint{background:var(--badge-bint-bg);color:var(--badge-bint-color)}
.bsight{background:var(--badge-bsight-bg);color:var(--badge-bsight-color)}
/* Conservation status badges */
.b-endangered{background:var(--badge-endangered-bg);color:var(--badge-endangered-color)}
.b-threatened{background:var(--badge-threatened-bg);color:var(--badge-threatened-color)}
.b-concern{background:var(--badge-concern-bg);color:var(--badge-concern-color)}
.b-sensitive{background:var(--badge-sensitive-bg);color:var(--badge-sensitive-color)}
/* Sensitive species notice */
.sensitive-notice{display:flex;gap:0.5rem;align-items:flex-start;background:#fef6d0;border:1px solid rgba(122,90,0,0.18);border-radius:0.4375rem;padding:0.625rem 0.75rem;margin-bottom:1rem;font-size:0.75rem;line-height:1.5;color:#7a5a00}
[data-theme="dark"] .sensitive-notice{background:rgba(122,90,0,0.22);border-color:rgba(232,208,106,0.18);color:#e8d06a}
.conservation-notice{display:flex;gap:0.5rem;align-items:flex-start;border-radius:0.4375rem;padding:0.625rem 0.75rem;margin-bottom:1rem;font-size:0.75rem;line-height:1.5}
.conservation-notice.endangered{background:#fdedf0;border:1px solid rgba(138,16,32,0.18);color:#8a1020}
.conservation-notice.threatened{background:#fff0e0;border:1px solid rgba(138,56,0,0.18);color:#8a3800}
[data-theme="dark"] .conservation-notice.endangered{background:rgba(138,16,32,0.2);border-color:rgba(240,128,144,0.2);color:#f08090}
[data-theme="dark"] .conservation-notice.threatened{background:rgba(138,56,0,0.2);border-color:rgba(240,168,112,0.2);color:#f0a870}
.sensitive-notice-icon{font-size:1rem;flex-shrink:0;margin-top:0.0625rem}
.sensitive-notice-text{flex:1}
.rare-mark{font-size:0.75rem;color:#8a2020;margin-left:0.1875rem;vertical-align:middle;line-height:1}
.ext-mark{font-size:0.5625rem;background:var(--badge-bext-bg);color:var(--badge-bext-color);padding:0.0625rem 0.25rem;border-radius:0.1875rem;font-weight:500;margin-left:0.1875rem;vertical-align:middle}

/* DIFFICULTY DOT + RARE DOT */
.diff-dot,.rare-mark-dot{display:inline-block;width:0.4375rem;height:0.4375rem;border-radius:50%;margin-left:0.3125rem;margin-top:-3px;vertical-align:middle;flex-shrink:0}
.diff-1{background:#2e7d32;opacity:0.85}.diff-2{background:#558b2f;opacity:0.85}.diff-3{background:#f57f17;opacity:0.85}.diff-4{background:#e65100;opacity:0.85}.diff-5{background:#b71c1c;opacity:0.85}
.rare-mark-dot{background:#c62828}
.sensitive-mark-dot{background:#5a1a7a}
[data-theme="dark"] .sensitive-mark-dot{background:#c89ae8}

/* URGENCY */
.urgency-val{font-weight:500}
.urgency-warn{color:#e65100}
.urgency-critical{color:#b71c1c;font-weight:700}

.empty-msg{text-align:center;padding:2.5rem 1.25rem;color:var(--empty-color);font-family:var(--font-serif);font-size:1rem}

/* ── LIKELIHOOD INDICATOR ─────────────────────────────────────────────────── */
.blikely{display:flex;flex-direction:column;align-items:flex-end;gap:0.1875rem;flex-shrink:0;min-width:3.5rem}
.likely-label{font-size:0.5625rem;font-weight:500;text-align:right;white-space:nowrap}
.likely-bar-wrap{width:100%;height:0.25rem;border-radius:99px;background:rgba(61,92,53,0.1)}
[data-theme="dark"] .likely-bar-wrap{background:rgba(255,255,255,0.08)}
.likely-bar{height:0.25rem;border-radius:99px;transition:width 0.3s}
.likely-0 .likely-label{color:rgba(28,31,26,0.25)}
[data-theme="dark"] .likely-0 .likely-label{color:rgba(255,255,255,0.2)}
.likely-0 .likely-bar{background:rgba(61,92,53,0.15);width:4%}
.likely-1 .likely-label{color:#7a6a00}
[data-theme="dark"] .likely-1 .likely-label{color:#c8aa00}
.likely-1 .likely-bar{background:#d4a800;width:25%}
.likely-2 .likely-label{color:#2e6020}
[data-theme="dark"] .likely-2 .likely-label{color:#7a9e72}
.likely-2 .likely-bar{background:#5a9e40;width:52%}
.likely-3 .likely-label{color:#1a5a2a}
[data-theme="dark"] .likely-3 .likely-label{color:#90c87a}
.likely-3 .likely-bar{background:#3d8c28;width:78%}
.likely-4 .likely-label{color:#0f4020}
[data-theme="dark"] .likely-4 .likely-label{color:#a8e890}
.likely-4 .likely-bar{background:#2e6e18;width:100%}

/* ── DETAIL PANEL ───────────────────────────────────────────────────────────── */
.detail-overlay{display:none;position:fixed;inset:0;z-index:10}
.detail-overlay.open{display:block}
.detail-scrim{position:absolute;inset:0;background:rgba(0,0,0,0.18);cursor:pointer}
.detail{position:absolute;top:0;right:0;bottom:0;width:22.5rem;background:var(--detail-bg);overflow-y:auto;
  transform:translateX(100%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-4px 0 24px rgba(0,0,0,0.18)}
.detail-overlay.open .detail{transform:translateX(0)}
/* Close button sits over the photo — always white */
.detail-close{position:absolute;top:0.75rem;right:0.75rem;width:1.75rem;height:1.75rem;border-radius:50%;border:1px solid rgba(255,255,255,0.3);background:rgba(0,0,0,0.32);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;font-size:1rem;line-height:1;color:rgba(255,255,255,0.85);transition:all 0.15s}
.detail-close:hover{background:rgba(0,0,0,0.55)}

/* Photo bleeds edge-to-edge, name overlaid on gradient */
.img-wrap{position:relative;width:100%;min-height:13.75rem;overflow:hidden;background:#1e2d1a;flex-shrink:0}
.img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 0.35s}
.img-wrap img.loading{opacity:0}
.img-loader{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(150deg,#1e2d1a,#2d4228)}
.img-loader-txt{color:rgba(255,255,255,0.22);font-family:var(--font-serif);font-size:0.875rem}
.img-credit{position:absolute;top:0.375rem;left:0.5rem;font-size:0.5625rem;color:rgba(255,255,255,0.5);background:rgba(0,0,0,0.4);padding:0.125rem 0.4375rem;border-radius:0.25rem;max-width:14.375rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Name overlay at bottom of photo */
.img-name-overlay{position:absolute;bottom:0;left:0;right:0;padding:2rem 1.25rem 0.875rem;background:linear-gradient(transparent,rgba(0,0,0,0.72));pointer-events:none;text-shadow:0 2px 2px rgba(0,0,0,0.3)}
.detail-name{font-family:var(--font-serif);font-size:1.3125rem;font-weight:700;line-height:1.2;color:#fff}
.detail-sci{font-family:var(--font-serif);font-style:italic;font-size:0.875rem;color:rgba(255,255,255,0.65);margin-top:0.1875rem}

.detail-body{padding:1rem 1.25rem}
/* Action button row — Mark seen / Chase / eBird map */
.detail-action-row{display:flex;gap:0.5rem;margin-bottom:1rem}
.detail-action-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:0.375rem;padding:0.5rem 0.25rem;border-radius:0.4375rem;border:1px solid var(--detail-border);background:var(--ebird-bg);color:var(--ink);font-family:var(--font-sans);font-size:0.75rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all 0.15s;white-space:nowrap}
.detail-action-btn:hover{background:var(--row-sel);border-color:var(--sage-mid);color:var(--sage)}
.detail-action-btn.on{background:var(--sage);border-color:var(--sage);color:white}
.detail-action-btn:disabled{opacity:0.4;cursor:default}
/* Hidden icon-btns — kept so JS refreshMarkBtn/refreshChaseBtn still work */
.icon-btn{position:absolute;width:0;height:0;overflow:hidden;opacity:0;pointer-events:none;border:none;padding:0}
.detail-top{display:none}
.detail-badges{display:flex;flex-wrap:wrap;gap:0.3125rem;margin-bottom:1rem}
.detail-meta{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--detail-border);display:flex;flex-direction:column;gap:0.5rem}
.meta-row{display:flex;justify-content:space-between;font-size:0.875rem;gap:0.75rem}
.meta-habitats{display:flex;flex-direction:column;gap:0.1875rem;text-align:right}
.meta-habitat{font-size:0.875rem;color:var(--meta-val-color)}
.meta-label{color:var(--meta-label-color);flex-shrink:0}
.meta-val{font-weight:normal;text-align:right;color:var(--meta-val-color)}
.meta-val.mono{font-family:monospace;font-size:0.75rem}
.meta-section-hd{font-size:1rem;font-weight:600;letter-spacing:0.01em;text-transform:none;color:var(--ink);margin-top:1rem;padding-top:1rem;border-top:1px solid var(--detail-border)}
.loc-disclaimer{font-size:0.75rem;font-style:italic;color:var(--meta-label-color);line-height:1.5}
.loc-list{display:flex;flex-direction:column}
.loc-county-hd{font-size:0.5625rem;letter-spacing:0.1em;text-transform:uppercase;font-weight:400;color:var(--meta-label-color);margin-top:0.75rem;margin-bottom:0.1875rem;opacity:0.85}
.loc-item{font-size:0.75rem;color:var(--loc-item-color);padding:0.1875rem 0;line-height:1.4;display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem}
.loc-item a{font-size:0.625rem;color:rgba(28,31,26,0.3);text-decoration:none;white-space:nowrap;flex-shrink:0;margin-left:auto}
[data-theme="dark"] .loc-item a{color:rgba(255,255,255,0.25)}
.loc-item a:hover{color:var(--sage)}
.loc-item.muted{opacity:0.45;font-style:italic}

.ebird-wrap{margin-bottom:-0.5rem}
.ebird-wrap-label{font-size:1rem;font-weight:600;letter-spacing:0.01em;text-transform:none;color:var(--ink);margin-bottom:0.4375rem}
.ebird-btns{display:flex;gap:0.5rem}
.ebird-btn{flex:1;display:block;text-align:center;padding:0.5rem 0.5rem;border-radius:0.4375rem;border:1px solid var(--detail-border);background:var(--ebird-bg);color:var(--ebird-color);font-family:var(--font-sans);font-size:0.875rem;font-weight:500;text-decoration:none;transition:all 0.15s;white-space:nowrap}
.ebird-btn:hover{background:var(--row-sel);border-color:var(--sage-mid)}
/* ── MAP MODAL ───────────────────────────────────────────────────────────────── */
#map-modal{display:none;position:fixed;inset:0;z-index:100;align-items:center;justify-content:center}
#map-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.5)}
#map-container{position:relative;z-index:1;width:min(720px,95vw);height:min(520px,85vh);background:var(--detail-bg);border-radius:0.75rem;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,0.3)}
#map-header{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 1rem;border-bottom:1px solid var(--detail-border);flex-shrink:0;background:var(--detail-bg)}
#map-title{font-size:0.875rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#map-close{background:transparent;border:1px solid var(--detail-border);border-radius:50%;width:1.75rem;height:1.75rem;cursor:pointer;color:var(--detail-close-color);font-size:0.875rem;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all 0.15s}
#map-close:hover{background:var(--row-sel)}
#map-el{flex:1;width:100%}
.map-btn{flex:1;display:block;text-align:center;padding:0.5rem 0.5rem;border-radius:0.4375rem;border:1px solid var(--detail-border);background:var(--ebird-bg);color:var(--ebird-color);font-family:var(--font-sans);font-size:0.875rem;font-weight:500;cursor:pointer;width:100%;margin-top:0.5rem;transition:all 0.15s}
.map-btn:hover{background:var(--row-sel);border-color:var(--sage-mid)}
.abund-wrap{display:flex;flex-direction:column;align-items:center}
.chart-bars{display:none}
.chart-months{display:none}

/* ── Settings modal ── */
.stg-sheet{background:var(--sidebar-bg,#1a2318);border:1px solid rgba(255,255,255,0.12);border-radius:14px;width:100%;max-width:460px;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,0.5);font-family:var(--font-sans,sans-serif);color:#c8d8c0}
.stg-sheet--narrow{max-width:360px}
.stg-section--flush{margin-top:6px}
.stg-header{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0}
.stg-title{font-size:1.125rem;font-weight:600;color:#e0ead8}
.stg-close{background:none;border:none;color:rgba(200,216,192,0.4);cursor:pointer;font-size:1.25rem;line-height:1;padding:0}
.stg-body{overflow-y:auto;flex:1;padding:6px 16px 20px}
.stg-section{margin-top:18px}
.stg-section:first-child{margin-top:10px}
.stg-section-hd{font-size:0.625rem;letter-spacing:0.08em;text-transform:uppercase;opacity:0.4;margin-bottom:8px;padding:0 2px}
.stg-radio-group{display:flex;flex-direction:column;gap:12px}
.stg-radio{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.07);cursor:pointer;font-size:0.875rem;transition:all 0.12s}
.stg-radio input{accent-color:#5a8a50;width:14px;height:14px;cursor:pointer;flex-shrink:0}
.stg-radio--active{background:rgba(90,138,80,0.14);border-color:rgba(90,138,80,0.35);color:#e0ead8}
.stg-toggle-row{display:flex;align-items:flex-start;gap:10px;border-radius:8px;margin:14px 2px;margin-top:0;cursor:pointer}
.stg-toggle-row:first-child{margin-top:8px}
.stg-toggle-text{flex:1;min-width:0}
.stg-toggle-label{font-size:0.875rem;color:#e0ead8;font-weight:500}
.stg-toggle-sub{font-size:0.75rem;opacity:0.5;margin-top:2px;line-height:1.4}
.stg-toggle-wrap{position:relative;flex-shrink:0;width:36px;height:20px;cursor:pointer}
.stg-checkbox{position:absolute;opacity:0;width:0;height:0}
.stg-toggle-thumb{display:block;width:36px;height:20px;border-radius:10px;background:rgba(255,255,255,0.12);transition:background 0.2s;position:relative}
.stg-toggle-thumb::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform 0.2s}
.stg-checkbox:checked+.stg-toggle-thumb{background:#5a8a50}
.stg-checkbox:checked+.stg-toggle-thumb::after{transform:translateX(16px)}
.stg-danger-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 2px}
.stg-danger-toggle-label{font-size:0.875rem;color:rgba(200,216,192,0.5)}
.stg-danger-note{font-size:0.75rem;opacity:0.45;margin-bottom:8px;padding:0 2px;margin-top:8px}
.stg-danger-btns{display:flex;flex-direction:column;gap:12px}
.stg-danger-btn{width:100%;padding:9px 12px;border-radius:7px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.04);color:rgba(200,216,192,0.6);font-family:var(--font-sans,sans-serif);font-size:0.875rem;cursor:pointer;text-align:left;transition:all 0.15s}
.stg-danger-btn:hover{background:rgba(255,255,255,0.09);color:rgba(200,216,192,0.9)}
.stg-danger-btn--all{border-color:rgba(200,180,100,0.25);color:rgba(210,190,110,0.75);font-weight:500;margin-top:12px}
.stg-danger-btn--all:hover{background:rgba(200,180,100,0.08);color:rgba(220,200,120,0.9)}
/* ── Custom confirm dialog ── */
.ctb-confirm-overlay{position:fixed;inset:0;z-index:9800;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);padding:20px}
.ctb-confirm-box{background:var(--sidebar-bg,#1a2318);border:1px solid rgba(255,255,255,0.12);border-radius:14px;max-width:360px;width:100%;padding:24px 22px 20px;box-shadow:0 24px 60px rgba(0,0,0,0.5);font-family:var(--font-sans,sans-serif);color:#c8d8c0}
.ctb-confirm-msg{font-size:0.875rem;line-height:1.6;margin-bottom:18px;color:#e0ead8}
.ctb-confirm-btns{display:flex;gap:8px;justify-content:flex-end}
.ctb-confirm-btn{padding:9px 20px;border-radius:8px;font-family:var(--font-sans,sans-serif);font-size:0.875rem;font-weight:500;cursor:pointer;transition:all 0.15s;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);color:rgba(200,216,192,0.75)}
.ctb-confirm-btn:hover{background:rgba(255,255,255,0.12);color:#e0ead8}
.ctb-confirm-btn--yes{background:#5a8a50;border-color:#5a8a50;color:#fff}
.ctb-confirm-btn--yes:hover{background:#4e7a45}

/* ── Modal overlays ── */
.modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);padding:16px}
.modal-overlay--z-onboard{z-index:9000}
.modal-overlay--z-import{z-index:9100}
.modal-overlay--z-ach{z-index:9200}
.modal-overlay--z-settings{z-index:9300}
.modal-overlay--z-reset{z-index:9400}

/* ── Achievement modal ── */
.ach-modal-sheet{background:var(--sidebar-bg,#1a2318);border:1px solid rgba(255,255,255,0.12);border-radius:14px;width:100%;max-width:480px;max-height:85vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,0.5);font-family:var(--font-sans,sans-serif);color:#c8d8c0}
.ach-modal-hd{padding:18px 18px 14px;border-bottom:1px solid rgba(255,255,255,0.08);flex-shrink:0}
.ach-modal-hd-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.ach-modal-title{font-size:1.125rem;font-weight:600;color:#e0ead8}
.ach-modal-close{background:none;border:none;color:rgba(200,216,192,0.4);cursor:pointer;font-size:1.25rem;line-height:1;padding:0}
.ach-modal-progress-row{display:flex;align-items:center;gap:10px}
.ach-modal-progress-bar{background:rgba(255,255,255,0.08);border-radius:99px;height:6px;flex:1;overflow:hidden}
.ach-modal-progress-fill{background:#5a8a50;height:100%;border-radius:99px}
.ach-modal-count{font-size:0.75rem;opacity:0.5;white-space:nowrap}
.ach-modal-body{overflow-y:auto;flex:1;padding:8px 18px 16px}

/* ── Import confirm modal ── */
.import-modal-sheet{background:var(--sidebar-bg,#1a2318);border:1px solid rgba(255,255,255,0.12);border-radius:14px;max-width:400px;width:100%;padding:26px 24px 22px;box-shadow:0 24px 60px rgba(0,0,0,0.5);color:#c8d8c0;font-family:var(--font-sans,sans-serif)}
.import-modal-title{font-size:1rem;font-weight:600;margin-bottom:12px;color:#e0ead8}
.import-modal-msg{font-size:0.875rem;opacity:0.75;margin:0 0 4px}
.import-modal-unmatched{margin-top:14px}
.import-modal-unmatched-label{font-size:0.75rem;opacity:0.6;margin-bottom:6px}
.import-modal-unmatched-list{max-height:120px;overflow-y:auto;background:rgba(0,0,0,0.25);border-radius:6px;padding:8px 10px}
.import-modal-unmatched-item{font-size:0.75rem;opacity:0.55}
.import-modal-btns{display:flex;gap:10px;margin-top:20px}
.import-modal-btn-confirm{flex:1;padding:10px;border-radius:8px;border:none;cursor:pointer;background:#5a8a50;color:#fff;font-family:var(--font-sans,sans-serif);font-size:0.875rem;font-weight:500}
.import-modal-btn-cancel{flex:1;padding:10px;border-radius:8px;cursor:pointer;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(200,216,192,0.7);font-family:var(--font-sans,sans-serif);font-size:0.875rem}

/* ── New birder onboarding modal ── */
.nb-sheet{background:var(--sidebar-bg,#1a2318);border:1px solid rgba(255,255,255,0.12);border-radius:14px;max-width:425px;width:100%;padding:28px 24px 24px;box-shadow:0 24px 60px rgba(0,0,0,0.5);color:#c8d8c0;font-family:var(--font-sans,sans-serif)}
.nb-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px}
.nb-icon{flex-shrink:0;width:44px;height:44px;border-radius:10px;background:rgba(168,196,160,0.15);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.nb-title{font-size:1.125rem;font-weight:600;color:#e0ead8}
.nb-subtitle{font-size:0.875rem;opacity:0.65;line-height:1.5}
.nb-intro{font-size:1rem;line-height:1.65;opacity:0.8;margin:0 0 18px}
.nb-options{display:flex;flex-direction:column;gap:18px;margin-bottom:18px}
.nb-option-box{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:10px 14px}
.nb-option-label{font-size:0.75rem;letter-spacing:0.07em;text-transform:uppercase;opacity:0.4;margin-bottom:8px}
.nb-theme-row{display:flex;gap:12px}
.nb-option-box--toggle{padding:11px 14px}
.nb-toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer}
.nb-toggle-checkbox{width:15px;height:15px;accent-color:#5a8a50;cursor:pointer;flex-shrink:0;margin-top:3px}
.nb-toggle-title{font-size:1rem;font-weight:600;color:#e0ead8}
.nb-toggle-sub{font-size:0.875rem;opacity:0.55;margin-top:2px}
.nb-actions{display:flex;gap:18px;flex-direction:column}
.nb-btn-primary{width:100%;padding:11px;border-radius:8px;border:none;cursor:pointer;background:#5a8a50;color:#fff;font-family:var(--font-sans,sans-serif);font-size:0.875rem;font-weight:500}
.nb-btn-secondary{width:100%;padding:10px;border-radius:8px;cursor:pointer;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);color:rgba(200,216,192,0.7);font-family:var(--font-sans,sans-serif);font-size:0.875rem}

/* ── Settings data section buttons ── */
.stg-data-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:10px 6px 8px;border-radius:7px;border:1px solid rgba(255,255,255,0.09);background:rgba(255,255,255,0.04);color:rgba(200,216,192,0.6);font-family:var(--font-sans,sans-serif);font-size:0.75rem;cursor:pointer;text-align:center;transition:background 0.15s,border-color 0.15s,color 0.15s;width:100%;line-height:1.2}
.stg-data-btn:hover{background:rgba(255,255,255,0.10);border-color:rgba(255,255,255,0.18);color:rgba(200,216,192,0.95)}
.stg-data-btn-icon{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.stg-data-btn-label{white-space:nowrap}