*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:#f0f4f8;padding:24px 16px}
.container{max-width:1280px;margin:0 auto}
.card{background:#fff;border-radius:16px;padding:20px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.02);border:1px solid #e2e8f0}
h1{font-size:1.6rem;color:#1e3a8a;margin-bottom:6px;letter-spacing:-0.3px}
.sub{color:#475569;margin-bottom:20px;border-left:3px solid #3b82f6;padding-left:12px;font-size:0.85rem}
.filters{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px;align-items:flex-end}
.filter-group{flex:1;min-width:160px}
.filter-group label{display:block;font-size:.7rem;font-weight:500;margin-bottom:4px;color:#475569}
.filter-group select{width:100%;padding:8px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:.85rem;background:#fff;transition:all 0.2s}
.filter-group select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 2px rgba(59,130,246,0.1)}
.grade-checkboxes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px;padding:8px 0}
.grade-checkboxes label{font-size:.75rem;margin-left:4px;margin-right:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.grade-checkboxes input{cursor:pointer}
.search-row{display:flex;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.search-input-group{flex:2;position:relative}
.search-input-group input{width:100%;padding:12px 16px;border:1px solid #cbd5e1;border-radius:6px;font-size:.95rem;transition:all 0.2s}
.search-input-group input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 2px rgba(59,130,246,0.1)}
.search-btn{background:#1e3a8a;color:#fff;border:none;padding:12px 24px;border-radius:6px;font-size:.95rem;cursor:pointer;transition:all 0.2s;font-weight:500}
.search-btn:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.05)}
.autocomplete-items{position:absolute;border:1px solid #cbd5e1;border-top:none;background:#fff;max-height:200px;overflow-y:auto;width:100%;z-index:99;border-radius:0 0 6px 6px;display:none;box-shadow:0 4px 8px rgba(0,0,0,0.05)}
.autocomplete-item{padding:8px 12px;cursor:pointer;font-size:.85rem;transition:background 0.1s}
.autocomplete-item:hover{background:#eef2ff}
.result-card{background:#fff;border-radius:12px;margin-bottom:12px;border:1px solid #e2e8f0;overflow:hidden;transition:all 0.2s ease}
.result-card:hover{transform:translateY(-3px);box-shadow:0 12px 24px -12px rgba(0,0,0,0.2);border-color:#cbd5e1}
.result-card:hover .row1,
.result-card:hover .row2{background:#c0e8c0}
.row1{padding:14px 16px;background:#fafcff;border-bottom:1px solid #eef2ff;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.school-name{font-size:1rem;font-weight:700;color:#0f172a;min-width:160px}
.school-code{font-size:0.65rem;color:#64748b;font-family:monospace;margin-left:6px;font-weight:normal}
.grade-badge{background:#dbeafe;color:#1e40af;padding:2px 10px;border-radius:3px;font-weight:600;font-size:.75rem}
.location{font-size:.75rem;color:#475569}
.level-badge{background:#e2e8f0;padding:2px 8px;border-radius:12px;font-size:.65rem;color:#334155;display:inline-block;border:1px solid #cbd5e1}
.row2{padding:10px 16px;background:#fff;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tag-section{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.tag{display:inline-block;padding:3px 10px;border-radius:6px;font-size:.65rem;color:#1e293b;transition:all 0.1s}
.tag-official{background:#e6edff;color:#1e3a8a}
.tag-feature{background:#fef2f5;color:#9d174d}
.tag-doublefirst{background:#ffefdf;color:#9a3412}
.tag-doublehigh{background:#e9eaff;color:#3730a3}
.tag:hover{transform:translateY(-1px);filter:brightness(0.96)}
.empty-result{text-align:center;padding:40px;color:#94a3b8}
footer{text-align:center;font-size:.65rem;color:#94a3b8;margin-top:24px;border-top:1px solid #e2e8f0;padding-top:16px}
@media (max-width:680px){.row1{flex-direction:column;align-items:flex-start}.filter-group{min-width:100%}}