.search-page { background: #fff; }
.search-layout { display: flex; flex-direction: column; min-height: 100vh; max-width: 800px; margin: 0 auto; padding: 28px 20px 40px; }
.search-intro { text-align: center; }
.brand-logo--search { margin: 8px auto 20px; }
.search-intro h1 { margin: 0 0 8px; font-size: clamp(26px, 4vw, 34px); color: var(--brand); }
.search-intro > p { margin: 0 0 24px; color: var(--muted); line-height: 1.45; }
.search-box { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 7px 10px 7px 16px; border: 1px solid #dfe1e5; border-radius: 999px; background: #fff; box-shadow: 0 1px 6px rgba(32,33,36,.08); }
.search-box:focus-within { border-color: var(--brand); box-shadow: 0 1px 8px rgba(26,35,126,.2); }
.search-box__icon { color: #9aa0a6; font-size: 24px; }
.search-box input { flex: 1; min-width: 0; border: 0; padding: 11px 0; outline: 0; background: transparent; font-size: 16px; }
.search-examples { font-size: 13px; color: var(--muted); }
.search-examples button { padding: 0; border: 0; color: var(--brand); background: transparent; font-weight: 600; text-decoration: underline; }
.answer-counter { min-height: 20px; margin: 18px 0 8px; color: var(--muted); font-size: 13px; }
.answers { flex: 1; overflow-y: auto; }
.answer-card { margin-bottom: 16px; padding: 22px 26px; border: 1px solid #e8eaed; border-radius: 16px; background: #f8f9fa; line-height: 1.65; overflow-wrap: anywhere; animation: appear .2s ease-out; }
.answer-card__label { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 600; }
.answer-card__badge { padding: 1px 9px; border-radius: 999px; color: #fff; background: var(--brand); font-size: 10px; }
.answer-card__query { margin-bottom: 12px; padding: 10px 14px; border-radius: 12px; color: var(--brand); background: #e8f0fe; font-weight: 600; }
.answer-card__response { white-space: normal; }
.empty-state { max-width: 460px; margin: 50px auto; padding: 32px 20px; color: var(--muted); text-align: center; }
.empty-state > div { font-size: 50px; }.empty-state h2 { margin: 12px 0 8px; color: #202124; font-size: 22px; }.empty-state p { margin: 0; line-height: 1.5; }
.answers .typing { margin-bottom: 16px; border: 1px solid #e8eaed; background: #f8f9fa; }
@media (max-width: 520px) { .search-layout { padding: 20px 14px 28px; } .search-box { gap: 7px; padding-left: 12px; } .search-box .button { padding-inline: 15px; } .search-box__icon { font-size: 20px; } .answer-card { padding: 18px; } }