.area-search{display:grid;grid-template-columns:minmax(240px,520px) auto auto;align-items:center;gap:.7rem;margin:1rem 0;padding:.8rem;border:1px solid #dbe3ee;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(15,35,70,.06)}
.area-search label{position:relative;display:block;margin:0}
.area-search label>i{position:absolute;top:50%;left:.9rem;translate:0 -50%;color:#64748b;pointer-events:none}
.area-search input{width:100%;min-height:44px;padding:.68rem 1rem .68rem 2.55rem;border:1px solid #cbd5e1;border-radius:12px;background:#f8fafc;color:#172033;font:inherit;font-size:.95rem;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.area-search input:focus{border-color:#60a5fa;background:#fff;box-shadow:0 0 0 3px rgba(37,99,235,.12)}
.area-search-count{color:#64748b;font-size:.82rem;white-space:nowrap}
.area-search button{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:40px;padding:.55rem .75rem;border:0;border-radius:10px;background:#eef2f7;color:#334155;font-size:.82rem;font-weight:750}
.area-search button:hover{background:#e2e8f0}
.area-search-empty{display:flex;align-items:center;gap:.75rem;margin:1rem 0;padding:1rem;border:1px dashed #cbd5e1;border-radius:14px;background:#fff;color:#334155}
.area-search-empty[hidden],.area-search[hidden],[data-area-search-item][hidden]{display:none!important}
.area-search-empty>i{font-size:1.25rem;color:#64748b}
.area-search-empty strong,.area-search-empty span{display:block}
.area-search-empty strong{font-size:.9rem}
.area-search-empty span{margin-top:.1rem;color:#64748b;font-size:.8rem}
@media(max-width:767.98px){.area-search{grid-template-columns:1fr auto}.area-search-count{grid-column:1/-1;grid-row:2}.area-search button{grid-column:2;grid-row:1}.area-search input{font-size:16px}}
@media(max-width:420px){.area-search{grid-template-columns:1fr}.area-search button,.area-search-count{grid-column:1;grid-row:auto}.area-search button{width:100%}}