* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --primary:#1677ff; --primary-dark:#0958d9; --bg:#f0f6fe; --card-bg:#fff;
  --text:#1f2329; --text-secondary:#8a9099; --border:#e5e6eb;
}
html,body{ height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); font-size:14px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent;
}
.container{ max-width:1200px; margin:0 auto; padding:16px; }
.header{
  background:var(--primary); background-image:url("../img/banner.svg");
  background-size:cover; background-position:center; color:#fff;
  padding:28px 16px; text-align:center; border-radius:12px; margin-bottom:16px;
  box-shadow:0 4px 12px rgba(22,119,255,.18);
}
.header h1{ font-size:22px; font-weight:600; letter-spacing:1px; }
.header .subtitle{ font-size:13px; opacity:.9; margin-top:6px; }
.search-section{ background:var(--card-bg); border-radius:12px; padding:16px; margin-bottom:12px; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.search-box{ display:flex; gap:8px; align-items:center; }
.search-input-wrap{ position:relative; flex:1; min-width:0; }
.search-input{
  width:100%; height:44px; border:1px solid var(--border); border-radius:8px;
  padding:0 40px 0 14px; font-size:15px; color:var(--text); outline:none; background:#fff;
  transition:border-color .2s; -webkit-appearance:none;
}
.search-input:focus{ border-color:var(--primary); }
.clear-btn{
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border:none; background:#c8cdd3; color:#fff;
  border-radius:50%; font-size:15px; line-height:1; cursor:pointer; display:none;
  align-items:center; justify-content:center; padding:0;
}
.clear-btn.visible{ display:flex; }
.clear-btn:active{ background:#a8aeb4; }
.search-btn{
  height:44px; padding:0 22px; border:none; background:var(--primary); color:#fff;
  border-radius:8px; font-size:15px; font-weight:500; cursor:pointer; transition:background .2s; white-space:nowrap;
}
.search-btn:active{ background:var(--primary-dark); }
.result-meta{ font-size:13px; color:var(--text-secondary); margin:4px 4px 12px; }
.result-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:12px; }
.card{
  background:var(--card-bg); border-radius:10px; padding:16px;
  box-shadow:0 2px 8px rgba(0,0,0,.04); transition:transform .15s,box-shadow .15s;
}
.card:active{ transform:translateY(1px); }
.card-name{ font-size:16px; font-weight:600; color:var(--text); margin-bottom:10px; word-break:break-all; }
.card-row{ display:flex; font-size:13px; margin-bottom:6px; align-items:flex-start; }
.card-row:last-child{ margin-bottom:0; }
.card-label{ color:var(--text-secondary); width:64px; flex-shrink:0; }
.card-value{ color:var(--text); flex:1; word-break:break-all; }
.card-value.phone a{ color:var(--primary); text-decoration:none; }
.nav-btn{
  display:inline-block; margin-left:8px; padding:2px 10px; font-size:12px;
  color:var(--primary); border:1px solid var(--primary); border-radius:4px;
  text-decoration:none; white-space:nowrap; vertical-align:middle; background:#fff;
  transition:background .15s;
}
.nav-btn:active{ background:#eaf2ff; }
.highlight{ color:var(--primary); background:rgba(22,119,255,.12); border-radius:2px; padding:0 1px; }
.empty{ grid-column:1/-1; text-align:center; padding:56px 16px; color:var(--text-secondary); }
.empty-icon{
  width:56px; height:56px; margin:0 auto 12px; border-radius:50%; background:#e8eef7;
  color:#9aa7b8; font-size:20px; font-weight:600; display:flex; align-items:center; justify-content:center;
}
.empty-text{ font-size:14px; }
.footer{ text-align:center; font-size:12px; color:var(--text-secondary); padding:20px 16px 8px; margin-top:12px; }
@media (max-width:640px){
  .container{ padding:12px; }
  .header{ padding:22px 12px; border-radius:10px; margin-bottom:12px; }
  .header h1{ font-size:19px; }
  .header .subtitle{ font-size:12px; }
  .result-list{ grid-template-columns:1fr; gap:10px; }
  .search-btn{ padding:0 18px; font-size:14px; }
  .card{ padding:14px; }
}