*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-page:oklch(96.5% .008 75);--bg-card:oklch(99.3% .004 75);--bg-elevated:oklch(100% .002 75);--text-primary:oklch(22% .02 55);--text-secondary:oklch(46% .015 55);--text-tertiary:oklch(60% .01 55);--accent:oklch(42% .09 172);--accent-soft:oklch(92% .025 172);--rarity-algemeen:oklch(52% .09 152);--rarity-vrij-algemeen:oklch(58% .11 85);--rarity-zeldzaam:oklch(55% .13 32);--rarity-zeer-zeldzaam:oklch(48% .14 315);--rarity-onbekend:oklch(52% .01 55);--border:oklch(91% .006 75);--border-strong:oklch(84% .008 75);--shadow-sm:0 1px 3px oklch(20% .01 55/.06);--shadow-md:0 4px 16px oklch(20% .01 55/.08);--shadow-lg:0 12px 40px oklch(20% .01 55/.12);--space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;--space-2xl:48px;--space-3xl:64px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--ease-out:cubic-bezier(.16, 1, .3, 1);--duration-fast:.18s;--duration-normal:.3s;--font-display:"Brygada 1918", Georgia, serif;--font-body:"Albert Sans", system-ui, sans-serif}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px}body{font-family:var(--font-body);color:var(--text-primary);background:var(--bg-page);min-height:100dvh;font-weight:400;line-height:1.55}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.2}img{max-width:100%;display:block}button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:none}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}::selection{background:var(--accent-soft);color:var(--text-primary)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.bird-card{background:var(--bg-card);border-radius:var(--radius-lg);cursor:pointer;border:1px solid var(--border);transition:transform var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);animation:card-enter .5s var(--ease-out) both;animation-delay:var(--enter-delay,0s);overflow:hidden}.bird-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.bird-card:active{transform:translateY(-2px)}.bird-card-photo{aspect-ratio:4/3;background:var(--border);position:relative;overflow:hidden}.bird-card-photo img{object-fit:cover;width:100%;height:100%;transition:transform .6s var(--ease-out)}.bird-card:hover .bird-card-photo img{transform:scale(1.05)}.rarity-dot{width:10px;height:10px;box-shadow:0 0 0 2px var(--bg-card);border-radius:50%;flex-shrink:0}.rarity-dot[data-rarity=algemeen]{background:var(--rarity-algemeen)}.rarity-dot[data-rarity=vrij\ algemeen]{background:var(--rarity-vrij-algemeen)}.rarity-dot[data-rarity=zeldzaam]{background:var(--rarity-zeldzaam)}.rarity-dot[data-rarity=zeer\ zeldzaam]{background:var(--rarity-zeer-zeldzaam)}.rarity-dot[data-rarity=onbekend]{background:var(--rarity-onbekend)}.bird-card-info{padding:12px var(--space-md) var(--space-md);text-align:left}.bird-card-name-row{align-items:center;gap:var(--space-sm);margin-bottom:2px;display:flex}.bird-card-name{font-family:var(--font-display);color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:.95rem;font-weight:600;line-height:1.3;overflow:hidden}.bird-card-scientific{color:var(--text-tertiary);text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-style:italic;overflow:hidden}@keyframes card-enter{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){.bird-card-info{padding:10px 12px 12px}.bird-card-name{font-size:.85rem}.bird-card-scientific{font-size:.72rem}}.detail-overlay{z-index:100;animation:overlay-fade-in .3s var(--ease-out);padding:var(--space-lg);background:oklch(20% .01 55/.4);justify-content:center;align-items:flex-end;display:flex;position:fixed;inset:0}@keyframes overlay-fade-in{0%{opacity:0}to{opacity:1}}.detail-panel{background:var(--bg-elevated);border-radius:var(--radius-lg) var(--radius-lg) 0 0;width:100%;max-width:640px;max-height:92vh;animation:panel-slide-up .4s var(--ease-out);position:relative;overflow-y:auto}@keyframes panel-slide-up{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.detail-close{z-index:2;padding:var(--space-md) var(--space-md) 0;justify-content:flex-end;display:flex;position:sticky;top:0}.detail-close button{background:var(--bg-elevated);border:1px solid var(--border);width:36px;height:36px;color:var(--text-secondary);transition:all var(--duration-fast) var(--ease-out);box-shadow:var(--shadow-sm);border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;display:flex}.detail-close button:hover{background:var(--bg-page);color:var(--text-primary)}.detail-photo{aspect-ratio:16/10;background:var(--border);width:100%;margin-top:calc(-1 * var(--space-xl));overflow:hidden}.detail-photo img{object-fit:cover;width:100%;height:100%}.detail-content{padding:var(--space-lg) var(--space-lg) var(--space-2xl)}.detail-header{margin-bottom:var(--space-lg)}.detail-name{letter-spacing:-.01em;margin-bottom:2px;font-size:clamp(1.5rem,4vw,1.9rem)}.detail-scientific{color:var(--text-secondary);margin-bottom:2px;font-size:.95rem;font-style:italic}.detail-authority{color:var(--text-tertiary);font-size:.8rem}.detail-badges{gap:var(--space-sm);margin-top:var(--space-md);flex-wrap:wrap;display:flex}.badge{background:var(--bg-page);color:var(--text-secondary);border:1px solid var(--border);border-radius:100px;align-items:center;gap:6px;padding:5px 12px;font-size:.78rem;font-weight:500;display:inline-flex}.badge-dot{border-radius:50%;width:8px;height:8px}.badge-protected{color:oklch(40% .08 50);background:oklch(95% .04 50);border-color:oklch(85% .06 50)}.detail-stats{gap:var(--space-md);margin-bottom:var(--space-lg);padding:var(--space-lg);background:var(--bg-page);border-radius:var(--radius-md);grid-template-columns:repeat(2,1fr);display:grid}.stat-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin-bottom:2px;font-size:.72rem;font-weight:500}.stat-value{font-family:var(--font-display);color:var(--text-primary);font-size:1.1rem;font-weight:600}.detail-info{color:var(--text-secondary);margin-bottom:var(--space-lg);font-size:.9rem;line-height:1.65}.detail-info h3{color:var(--text-primary);margin:var(--space-lg) 0 var(--space-sm);font-size:1rem}.detail-info h4{color:var(--text-primary);margin:var(--space-md) 0 var(--space-xs);font-size:.9rem}.detail-info ul{padding-left:var(--space-lg);margin:var(--space-sm) 0}.detail-info li{margin-bottom:var(--space-xs)}.detail-info p{margin-bottom:var(--space-sm)}.detail-info a{color:var(--accent)}.detail-link{align-items:center;gap:var(--space-sm);color:var(--accent);border-radius:var(--radius-sm);border:1px solid var(--accent-soft);transition:all var(--duration-fast) var(--ease-out);padding:8px 16px;font-size:.85rem;font-weight:500;display:inline-flex}.detail-link:hover{background:var(--accent-soft);text-decoration:none}@media (width<=640px){.detail-overlay{padding:0}.detail-panel{border-radius:var(--radius-lg) var(--radius-lg) 0 0;max-height:95vh}.detail-content{padding:var(--space-md) var(--space-md) var(--space-xl)}.detail-stats{padding:var(--space-md)}}.app-header{padding:var(--space-2xl) var(--space-lg) var(--space-xl);max-width:680px;margin:0 auto}.app-title{letter-spacing:-.02em;color:var(--text-primary);margin-bottom:var(--space-xs);font-size:clamp(2.4rem,5vw,3.2rem)}.app-subtitle{font-family:var(--font-body);color:var(--text-secondary);margin-bottom:var(--space-xl);font-size:1.05rem;font-weight:400}.search-wrapper{margin-bottom:var(--space-lg);position:relative}.search-icon{left:var(--space-md);width:18px;height:18px;color:var(--text-tertiary);pointer-events:none;position:absolute;top:50%;transform:translateY(-50%)}.search-input{width:100%;padding:12px var(--space-md) 12px 44px;font:inherit;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);transition:border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);font-size:.95rem}.search-input::placeholder{color:var(--text-tertiary)}.search-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.filter-row{gap:var(--space-sm);flex-wrap:wrap;display:flex}.filter-pill{border:1px solid var(--border);background:var(--bg-elevated);color:var(--text-secondary);transition:all var(--duration-fast) var(--ease-out);white-space:nowrap;border-radius:100px;padding:6px 14px;font-size:.82rem;font-weight:500}.filter-pill:hover{border-color:var(--border-strong);color:var(--text-primary)}.filter-pill[data-active=true]{background:var(--pill-color,var(--accent));color:#fff;border-color:#0000}.bird-grid-section{padding:0 var(--space-lg) var(--space-3xl)}.results-count{color:var(--text-tertiary);margin-bottom:var(--space-lg);max-width:680px;margin-left:auto;margin-right:auto;font-size:.85rem}.bird-grid{gap:var(--space-lg);grid-template-columns:repeat(auto-fill,minmax(220px,1fr));max-width:1200px;margin:0 auto;display:grid}.empty-state{text-align:center;padding:var(--space-3xl) var(--space-lg);max-width:400px;margin:0 auto}.empty-state-icon{margin-bottom:var(--space-md);opacity:.5;font-size:3rem}.empty-state h3{margin-bottom:var(--space-sm);color:var(--text-secondary);font-size:1.2rem}.empty-state p{color:var(--text-tertiary);font-size:.9rem}.loading{min-height:60vh;font-family:var(--font-display);color:var(--text-secondary);justify-content:center;align-items:center;font-size:1.1rem;display:flex}@media (width<=640px){.app-header{padding:var(--space-xl) var(--space-md) var(--space-lg)}.bird-grid-section{padding:0 var(--space-md) var(--space-2xl)}.bird-grid{gap:var(--space-md);grid-template-columns:repeat(auto-fill,minmax(155px,1fr))}.filter-row{gap:6px}.filter-pill{padding:5px 11px;font-size:.78rem}}