:root{
  --bg:#f6f3ec;--card:#fffdf8;--ink:#1f2a24;--mute:#5d6b62;--line:#e3ddcf;
  --uk:#1f3f9a;--uk-soft:#dfe6fa;--ca:#d52b1e;--ca-soft:#fbe0dd;--both:#2f7d4f;--both-soft:#d9efe1;
  --accent:#2f6b4a;--shadow:0 2px 10px rgba(40,40,20,.08);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121815;--card:#1a221d;--ink:#eaf0ea;--mute:#9db0a3;--line:#2b3830;
  --uk:#8ea8ff;--uk-soft:#1d2a52;--ca:#ff7a6e;--ca-soft:#4a1f1b;--both:#6fd39a;--both-soft:#17382a;
  --accent:#7fd1a2;--shadow:0 2px 10px rgba(0,0,0,.4);
}}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
header.top{background:linear-gradient(135deg,#1f3f2f,#2f6b4a 55%,#3d7d57);color:#fff;padding:28px 0 22px}
header.top h1{margin:0 0 4px;font-size:clamp(1.8rem,5vw,2.8rem);letter-spacing:-.5px}
header.top p{margin:0;opacity:.9;max-width:62ch}
nav.tabs{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
nav.tabs a{color:#fff;text-decoration:none;padding:7px 16px;border-radius:99px;background:rgba(255,255,255,.14);font-weight:600}
nav.tabs a.on{background:#fff;color:#1f3f2f}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:18px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow)}
.stat b{display:block;font-size:1.9rem;line-height:1.1}
.stat span{color:var(--mute);font-size:.85rem}
.stat.uk b{color:var(--uk)}.stat.ca b{color:var(--ca)}.stat.both b{color:var(--both)}
.filters{position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 0;display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.filters input,.filters select{font:inherit;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);min-width:0}
.filters input{flex:1 1 200px}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{font:inherit;border:0;background:transparent;color:var(--ink);padding:9px 12px;cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}
.count{color:var(--mute);margin:12px 0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;padding-bottom:40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.card .ph{aspect-ratio:4/3;background:var(--line);position:relative;overflow:hidden}
.card .ph img{width:100%;height:100%;object-fit:cover;display:block}
.card .ph .noimg{display:grid;place-items:center;height:100%;font-size:3rem;opacity:.5}
.card .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:1.15rem;line-height:1.2}
.card .lat{font-style:italic;color:var(--mute);font-size:.88rem;margin-top:-4px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.b{font-size:.75rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap}
.b.uk{background:var(--uk-soft);color:var(--uk)}
.b.ca{background:var(--ca-soft);color:var(--ca)}
.b.grp{background:var(--line);color:var(--mute)}
.b.x{opacity:.45;text-decoration:line-through}
.iucn{position:absolute;right:8px;top:8px;font-size:.72rem;font-weight:800;padding:3px 8px;border-radius:8px;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.iucn.LC{background:#3a8f4a}.iucn.NT{background:#8aa02b}.iucn.VU{background:#d19a12}.iucn.EN{background:#d2661a}.iucn.CR{background:#b4261b}.iucn.DD{background:#6b7280}
.fact{font-size:.93rem}
.fact::before{content:"💡 "}
.credit{margin-top:auto;font-size:.7rem;color:var(--mute);overflow-wrap:anywhere}
.credit a{color:var(--mute)}
footer{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--mute);font-size:.85rem}
.empty{padding:40px;text-align:center;color:var(--mute)}

/* infographic */
.sec{margin:34px 0}
.sec h2{font-size:clamp(1.3rem,3.5vw,1.8rem);margin:0 0 4px}
.sec .sub{color:var(--mute);margin:0 0 16px}
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:stretch;margin-top:22px}
.vs .side{border-radius:18px;padding:18px;color:#fff;text-align:center}
.vs .side.uk{background:linear-gradient(160deg,#1f3f9a,#122a6b)}
.vs .side.ca{background:linear-gradient(160deg,#d52b1e,#9b1a10)}
.vs .side .big{font-size:clamp(2.4rem,9vw,4.6rem);font-weight:900;line-height:1}
.vs .side small{display:block;opacity:.9}
.vs .mid{align-self:center;font-weight:900;font-size:1.6rem;color:var(--mute)}
.row{display:grid;grid-template-columns:130px 1fr 1fr;gap:10px;align-items:center;padding:7px 0;border-bottom:1px dashed var(--line)}
.row .lab{font-weight:600;font-size:.9rem}
.bar{height:26px;background:var(--line);border-radius:8px;position:relative;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;width:0;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.bar.uk i{background:var(--uk)}.bar.ca i{background:var(--ca)}
.bar em{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;font-weight:800;font-size:.85rem;color:#fff;mix-blend-mode:normal;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.legend{display:grid;grid-template-columns:130px 1fr 1fr;gap:10px;font-weight:800;margin-bottom:4px}
.legend .u{color:var(--uk)}.legend .c{color:var(--ca)}
.venn{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.venn div{border-radius:16px;padding:16px;text-align:center}
.venn .u{background:var(--uk-soft);color:var(--uk)}.venn .c{background:var(--ca-soft);color:var(--ca)}.venn .m{background:var(--both-soft);color:var(--both)}
.venn b{display:block;font-size:2.6rem;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:3px 10px;font-size:.82rem}
.h2h{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.duel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.duel h4{margin:0 0 10px;font-size:1rem}
.duel .pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duel .p{border-radius:12px;padding:10px;font-size:.88rem}
.duel .p.uk{background:var(--uk-soft)}.duel .p.ca{background:var(--ca-soft)}
.duel .p b{display:block;font-size:1.05rem}
.duel .p .flag{font-size:.7rem;font-weight:800;opacity:.8}
.duel .verdict{margin-top:8px;color:var(--mute);font-size:.85rem}
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.fx .stat b{font-size:1.5rem}
.src{font-size:.8rem;color:var(--mute)}
@media(max-width:600px){
  .row,.legend{grid-template-columns:90px 1fr 1fr;gap:6px}
  .row .lab{font-size:.78rem}
  .vs{grid-template-columns:1fr}.vs .mid{text-align:center}
  .venn{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.bar i{transition:none}}

/* ---- v2 additions ---- */
.tools{display:flex;gap:6px;align-items:center}
.tools .seenbtn{flex:1;font:inherit;font-size:.82rem;font-weight:700;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:6px 10px;cursor:pointer}
.tools .seenbtn.on{background:var(--both-soft);color:var(--both);border-color:var(--both)}
.tools .tool{font:inherit;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:10px;padding:6px 10px;cursor:pointer;text-decoration:none;line-height:1.4}
.tools .tool:hover,.tools .seenbtn:hover{background:var(--line)}
.card.flash{outline:3px solid var(--accent);animation:flash 2s ease 2}
@keyframes flash{50%{outline-color:transparent}}
.sod{margin:18px 0 4px}
.sodlink{display:grid;grid-template-columns:minmax(120px,240px) 1fr;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;color:inherit;text-decoration:none}
.sodlink img{width:100%;height:100%;min-height:150px;object-fit:cover;display:block}
.sodlink div{padding:12px 16px 12px 0}
.sodlink small{color:var(--accent);font-weight:800}
.sodlink h2{margin:2px 0 4px}
.sodlink p{margin:0;color:var(--mute)}
.seg.solo button{border-radius:0}
.filters .btn{font:inherit;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;padding:9px 12px;cursor:pointer}
.filters .btn.on{background:var(--accent);color:#fff}
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.pbtn{font:inherit;font-weight:700;border:0;background:var(--accent);color:#fff;border-radius:12px;padding:10px 18px;cursor:pointer}
.pbtn.alt{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:16px;margin:14px 0}
.hint{color:var(--mute);font-size:.88rem}

/* quiz */
.qimg{width:100%;max-height:340px;object-fit:cover;border-radius:14px;display:block;margin-bottom:12px;background:var(--line)}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-top:8px}
.opts button{font:inherit;font-weight:700;padding:13px;border-radius:12px;border:2px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;text-align:left}
.opts button:hover:not(:disabled){border-color:var(--accent)}
.opts button.right{border-color:var(--both);background:var(--both-soft);color:var(--both)}
.opts button.wrong{border-color:var(--ca);background:var(--ca-soft);color:var(--ca)}
.progress{height:8px;border-radius:99px;background:var(--line);overflow:hidden;margin-bottom:12px}
.progress i{display:block;height:100%;background:var(--accent);transition:width .3s}
.score{font-size:2.6rem;font-weight:900}

/* conservation / lists */
.band{margin:28px 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.band h2{margin:0}
.threat{font-size:.88rem;color:var(--mute);border-left:3px solid var(--ca);padding-left:8px}

/* calendar */
.cal{overflow-x:auto}
.cal table{border-collapse:separate;border-spacing:0 4px;width:100%;min-width:640px}
.cal th{font-size:.72rem;color:var(--mute);font-weight:700;padding:2px}
.cal td{padding:0}
.cal td.nm{width:230px;padding-right:8px;font-size:.88rem}
.cal td.m{height:24px;background:var(--line);border-radius:4px;border:2px solid var(--bg)}
.cal td.m.on.uk{background:var(--uk)}.cal td.m.on.ca{background:var(--ca)}
.cal th.now{color:var(--accent);text-decoration:underline}
.nowlist{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px}
.nowlist .stat{font-size:.9rem}

/* spots */
.spots{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.spot{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.spot h3{margin:0 0 2px}.spot .when{font-weight:700;color:var(--accent);font-size:.85rem}
.spot.uk{border-top:5px solid var(--uk)}.spot.ca{border-top:5px solid var(--ca)}

/* versus */
.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.pickers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pickers select{width:100%;font:inherit;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
table.diff{width:100%;border-collapse:collapse;margin-top:14px;background:var(--card);border-radius:14px;overflow:hidden}
table.diff td,table.diff th{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.diff th{width:26%;color:var(--mute)}

/* sightings */
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.tally .bar{height:18px;margin-top:6px}

@media(max-width:600px){
  .sodlink{grid-template-columns:1fr}.sodlink div{padding:0 14px 14px}
  .vgrid,.pickers{grid-template-columns:1fr}
  .cal td.nm{width:150px}
}
@media print{
  header.top nav,.filters,.sod,.tools,.btnrow,#print,.credit a[href^="http"]:after{display:none!important}
  body{background:#fff;color:#000}
  header.top{background:none;color:#000;padding:0}
  .grid{grid-template-columns:repeat(3,1fr);gap:10px}
  .card{break-inside:avoid;box-shadow:none}
  .stat,.card{border-color:#ccc}
}