.tool-hero{background:linear-gradient(135deg,var(--color-primary-50) 0%,var(--color-accent-50) 100%);padding-block:var(--space-12) var(--space-10);border-block-end:1px solid var(--color-border)}.tool-hero-inner{max-width:720px;margin-inline:auto;text-align:center}.tool-eyebrow{font-size:var(--text-sm);font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent);margin-block-end:var(--space-3)}.tool-hero h1{font-family:var(--font-display);color:var(--color-primary);font-size:var(--text-3xl);line-height:var(--leading-tight);margin-block-end:var(--space-4)}@media(min-width:768px){.tool-hero h1{font-size:var(--text-4xl)}}.tool-intro{color:var(--color-text-light);line-height:var(--leading-relaxed)}.tool-body{padding-block:var(--space-8) var(--space-16)}.mode-tabs{display:flex;gap:var(--space-2);margin-block-end:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-1);background-color:var(--color-bg-muted);max-width:480px;margin-inline:auto}.mode-tab{flex:1;padding:var(--space-3) var(--space-2);font-family:var(--font-sans);font-size:var(--text-sm);font-weight:600;color:var(--color-text-light);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.mode-tab:hover{color:var(--color-primary)}.mode-tab.active{background-color:var(--color-bg);color:var(--color-primary);box-shadow:var(--shadow-sm)}.explore-controls{display:flex;flex-direction:column;gap:var(--space-4);margin-block-end:var(--space-4)}#bird-search{width:100%;max-width:480px;margin-inline:auto;padding:var(--space-3) var(--space-4);font-size:var(--text-base);font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg)}#bird-search:focus{outline:2px solid var(--color-primary);outline-offset:1px}.chip-row{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2)}.chip{padding:var(--space-2) var(--space-3);font-size:var(--text-xs);font-weight:600;font-family:var(--font-sans);color:var(--color-text-light);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:999px;cursor:pointer;transition:all var(--transition-fast)}.chip:hover{color:var(--color-primary);border-color:var(--color-primary)}.chip-active,.chip-active:hover{background-color:var(--color-primary);border-color:var(--color-primary);color:#fff}.result-count{text-align:center;font-size:var(--text-sm);color:var(--color-text-muted);margin-block-end:var(--space-4)}.bird-grid{display:grid;grid-template-columns:1fr;gap:var(--space-4)}@media(min-width:640px){.bird-grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1024px){.bird-grid{grid-template-columns:repeat(3,1fr)}}.bird-card{padding:var(--space-5);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-2)}.bird-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);flex-wrap:wrap}.bird-card h3{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-primary)}.bird-badge{font-size:var(--text-xs);font-weight:600;color:var(--color-accent);background-color:var(--color-accent-50);padding:2px var(--space-2);border-radius:999px;white-space:nowrap}.bird-en{font-weight:600;color:var(--color-text);text-transform:capitalize}.bird-pron{font-size:var(--text-sm);color:var(--color-text-muted)}.bird-note{font-size:var(--text-sm);color:var(--color-text-light);line-height:var(--leading-normal);border-block-start:1px solid var(--color-border-light);padding-block-start:var(--space-2)}.no-results{text-align:center;color:var(--color-text-muted);padding-block:var(--space-8)}.quiz-card{max-width:640px;margin-inline:auto;padding:var(--space-6);background-color:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.quiz-start{text-align:center}.quiz-start h2{font-family:var(--font-display);font-size:var(--text-2xl);color:var(--color-primary);margin-block-end:var(--space-3)}.quiz-start p{color:var(--color-text-light);line-height:var(--leading-relaxed);margin-block-end:var(--space-6)}.btn-primary{display:inline-block;padding:var(--space-3) var(--space-8);font-family:var(--font-sans);font-size:var(--text-base);font-weight:700;color:#fff;background-color:var(--color-primary);border:2px solid var(--color-primary);border-radius:var(--radius-lg);cursor:pointer;transition:background-color var(--transition-fast)}.btn-primary:hover{background-color:var(--color-primary-dark);border-color:var(--color-primary-dark)}.quiz-meta{display:flex;justify-content:space-between;font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);margin-block-end:var(--space-2)}.quiz-progressbar{height:6px;background-color:var(--color-border-light);border-radius:999px;overflow:hidden;margin-block-end:var(--space-5)}.quiz-progressfill{height:100%;width:0%;background:linear-gradient(90deg,var(--color-primary) 0%,var(--color-accent) 100%);transition:width var(--transition-base)}.quiz-question{font-family:var(--font-display);font-size:var(--text-xl);color:var(--color-text);margin-block-end:var(--space-5);line-height:var(--leading-tight)}.quiz-options{display:grid;grid-template-columns:1fr;gap:var(--space-3)}@media(min-width:640px){.quiz-options{grid-template-columns:repeat(2,1fr)}}.quiz-option{padding:var(--space-3) var(--space-4);font-family:var(--font-sans);font-size:var(--text-base);font-weight:500;text-align:left;color:var(--color-text);background-color:var(--color-bg-muted);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer;transition:border-color var(--transition-fast),background-color var(--transition-fast);text-transform:capitalize}.quiz-option:hover:not(:disabled){border-color:var(--color-primary);background-color:var(--color-primary-50)}.quiz-option:disabled{cursor:default;opacity:.85}.option-correct{background-color:#ecfdf5!important;border-color:#059669!important;color:#065f46!important;opacity:1!important;font-weight:700}.option-wrong{background-color:#fef2f2!important;border-color:#dc2626!important;color:#991b1b!important;opacity:1!important}.quiz-feedback{margin-block-start:var(--space-5);padding-block-start:var(--space-4);border-block-start:1px solid var(--color-border-light)}.feedback-correct{font-weight:700;color:#065f46;margin-block-end:var(--space-2)}.feedback-wrong{font-weight:700;color:#991b1b;margin-block-end:var(--space-2)}.quiz-feedback-note{font-size:var(--text-sm);color:var(--color-text-light);line-height:var(--leading-normal);margin-block-end:var(--space-4)}.sources-note{max-width:740px;margin-inline:auto;margin-block-start:var(--space-10);font-size:var(--text-xs);color:var(--color-text-muted);line-height:var(--leading-normal);border-block-start:1px solid var(--color-border-light);padding-block-start:var(--space-4)}
