.search-demo { --demo-row-height: 44px; background: linear-gradient(135deg, #ecf5ef, #f8faf5); overflow: hidden; }
.search-demo__layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.search-demo__intro h2 { max-width: 15ch; }
.search-demo__intro > p:not(.eyebrow) { max-width: 56ch; }
.search-demo__volume { display: inline-flex; max-width: 100%; white-space: normal; padding: 7px 14px; border-radius: 999px; color: #07533f; background: #deefd5; font-weight: 800; font-size: .88rem; }
.search-demo__disclaimer { color: #53645e; font-size: .78rem; line-height: 1.45; margin-top: 14px; }
.search-demo__window { min-width: 0; overflow: hidden; border: 1px solid #cbdcd3; border-radius: 19px; background: #fff; box-shadow: 0 22px 58px rgba(11, 57, 46, .13); font: .94rem/1.4 system-ui, sans-serif; }
.search-demo__bar { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 8px 16px; color: #fff; background: #0a3440; }
.search-demo__bar b { white-space: nowrap; }
.search-demo__bar > span:last-child { margin-left: auto; color: #c7efd4; font-size: .75rem; text-align: right; }
.search-demo__lights { display: flex; gap: 4px; }
.search-demo__lights i { width: 7px; height: 7px; border-radius: 50%; background: #a7c1bc; }
.search-demo__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 17px; background: #f8fbf7; }
.search-demo__filters > span { min-width: 0; border: 1px solid #d5e5d9; border-radius: 9px; padding: 9px 10px; background: #fff; }
.search-demo__filters small { display: block; margin-bottom: 2px; color: #60706c; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.search-demo__filters b { display: block; color: #153f38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.search-demo__progress { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #0b5848; font-size: .77rem; font-weight: 700; }
.search-demo__meter { display: block; flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: #dcece1; }
.search-demo__meter i { display: block; width: 55%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #209272, #a8da65); animation: demo-meter 2.8s ease-in-out infinite alternate; }
@keyframes demo-meter { from { width: 20%; } to { width: 92%; } }
.search-demo__results { margin: 0 17px; border: 1px solid #dce8e1; border-radius: 10px; background: #fff; }
.search-demo__result-title { display: block; padding: 8px 12px; color: #546960; background: #eff6f0; font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.search-demo__viewport { height: calc(5 * var(--demo-row-height)); overflow: hidden; }
.search-demo__list { will-change: transform; }
.search-demo__result { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; box-sizing: border-box; height: var(--demo-row-height); padding: 6px 12px; border-top: 1px solid #e5eee8; color: #0e5746; }
.search-demo[data-demo-mode="mixed"] .search-demo__result { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 8px; }
.search-demo__contact { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.search-demo__contact > span { flex: none; }
.search-demo__contact b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.search-demo__file { display: flex; gap: 10px; align-items: center; margin: 13px 17px 17px; padding: 9px 12px; border-radius: 9px; color: #0d5747; background: #e9f4e9; }
.search-demo__file small { margin-left: auto; font-size: .74rem; }
@media (max-width: 850px) { .search-demo__layout { grid-template-columns: 1fr; } .search-demo__intro h2 { max-width: 24ch; } }
@media (max-width: 550px) { .search-demo__filters { grid-template-columns: 1fr 1fr; padding: 11px; } .search-demo__filters > span:last-child { grid-column: 1 / -1; } .search-demo__window { font-size: .82rem; } .search-demo__bar { padding-inline: 11px; flex-wrap: wrap; } .search-demo__bar > span:last-child { flex-basis: 100%; margin-left: 0; text-align: left; } .search-demo__results { margin-inline: 11px; } .search-demo[data-demo-mode="mixed"] { --demo-row-height: 62px; } .search-demo[data-demo-mode="mixed"] .search-demo__result { grid-template-columns: minmax(0, 1fr); gap: 2px; } .search-demo__contact b { font-size: .8rem; } .search-demo__file { margin-inline: 11px; } .search-demo__file small { display: none; } }
@media (prefers-reduced-motion: reduce) { .search-demo__meter i { animation: none; width: 72%; } .search-demo__list { transition: none !important; will-change: auto; } }