:root{
  --bg:#f7f9fc;--panel:#ffffff;--text:#0f172a;--muted:#5b6b82;--line:#e6ecf4;
  --primary:#0c5a87;--accent:#3aa1ff;--ring:#b7d4ff;
  --shadow-lg:0 18px 40px rgba(20,40,90,.08),0 6px 20px rgba(20,40,90,.06);
  --shadow-md:0 10px 26px rgba(20,40,90,.07),0 4px 12px rgba(20,40,90,.05);
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#fbfdff,#f4f7fc);color:var(--text);
  font:16px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1180px;margin:0 auto;padding:28px 18px}
.header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.brand{font-weight:900;font-size:20px;letter-spacing:.2px;color:var(--primary)}
.topcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-lg);padding:22px;margin-bottom:22px}
.h1{font-size:30px;font-weight:900;margin:0 0 14px}
.count{display:inline-flex;align-items:center;gap:8px;margin-left:10px;font-size:13px;
  background:#edf5ff;color:var(--primary);border:1px solid #d8e8ff;border-radius:999px;padding:6px 10px}
.toolbar{display:grid;grid-template-columns:240px 1fr 220px auto;gap:12px;align-items:center}
@media (max-width:980px){.toolbar{grid-template-columns:1fr}}
.input-wrap{position:relative}
.input-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:#9db0c9}
.input,.select{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:12px 12px 12px 40px;outline:none;color:var(--text);transition:box-shadow .12s ease,border-color .12s ease}
.select{padding-left:12px}
.input::placeholder{color:#9db0c9}
.input:focus,.select:focus{border-color:#bcd8ff;box-shadow:0 0 0 4px rgba(58,161,255,.18)}
.pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.pill{cursor:pointer;padding:9px 12px;border-radius:999px;border:1px solid #dbe8f6;background:#fff;color:#2b3a50;
  transition:box-shadow .12s ease,transform .08s ease}
.pill:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.pill.active{border-color:#b7d4ff;background:#eaf3ff;color:#0b3f6b;font-weight:700}
.grid{list-style:none;padding:0;margin:0;display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-md);padding:18px;transition:transform .12s ease}
.card:hover{transform:translateY(-2px)}
.muted{color:var(--muted);font-size:13px;margin:0 0 8px}
.detail-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:18px}
@media (max-width:980px){.detail-grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow-md);padding:18px}
.list{margin:0 0 0 20px}
.footer{color:#7b8aa3;font-size:12px;text-align:center;padding:28px 0;margin-top:10px}