/* (Your existing CSS remains exactly the same below here) */
:root {
    --primary:#1a1d23;
    --accent:#ffc107;
    --bg:#f4f7f6;
    --border:#e2e8f0;
    --muted:#64748b;
}

* {
    box-sizing:border-box;
}

body {
    background:var(--bg);
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    margin:0;
    padding:0 0 150px 0;
    color:#0f172a;
}

.container {
    max-width:800px;
    margin:auto;
    padding:15px 12px 20px;
}

header {
    text-align:center;
    margin-bottom:20px;
}

.powered-by {
    font-size: 10px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: -4px; 
    display: block;
}

.logo {
    font-weight:900;
    font-size:2.2rem;
    margin:0;
}

.tagline {
    font-size:12px;
    font-weight:800;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:1px;
    margin-top:2px;
}

/* Updated Search Form UX */
.search-form {
    display:flex;
    gap:8px;
    background:#fff;
    padding:6px;
    border-radius:16px;
    border:2px solid var(--border);
    margin-bottom:10px;
    box-shadow:0 6px 15px rgba(0,0,0,0.03);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-form:focus-within {
    border-color: var(--accent);
    box-shadow: 0 8px 20px rgba(255,193,7,0.18);
}

.search-form input {
    flex:1;
    min-width:0;
    border:none;
    padding:13px 10px;
    font-size:16px;
    font-weight:700;
    outline:none;
    background:transparent;
}

.search-form button {
    background:var(--accent);
    color:var(--primary);
    border:none;
    border-radius:12px;
    padding:0 22px;
    font-weight:900;
    cursor:pointer;
    text-transform:uppercase;
    transition: transform 0.1s ease;
}

.search-form button:active {
    transform: scale(0.95);
}

.clear-search {
    text-align:center;
    margin:0 0 20px;
}

.clear-search a {
    font-size:11px;
    font-weight:900;
    color:#64748b;
    text-transform:uppercase;
    text-decoration:none;
}

.group-title {
    font-size:11px;
    font-weight:900;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:1px;
    margin:20px 0 12px 5px;
}

.result-card {
    display:block;
    background:#fff;
    padding:14px 14px 12px;
    border-radius:16px;
    border:1px solid var(--border);
    margin-bottom:8px;
    text-decoration:none;
    color:#000;
    box-shadow:0 4px 10px rgba(0,0,0,0.02);
}

.result-card:active {
    transform:scale(0.98);
}

.badge {
    font-size:10px;
    font-weight:900;
    margin-bottom:8px;
    display:inline-block;
    text-transform:uppercase;
    padding:4px 8px;
    border-radius:6px;
}

.badge-broker { background:#e0e7ff; color:#3730a3; }
.badge-alert { background:#fee2e2; color:#b91c1c; }
.badge-facility { background:#dcfce7; color:#166534; }
.badge-qa { background:#fef3c7; color:#92400e; }

.res-title {
    font-weight:900;
    font-size:16px;
    text-transform:uppercase;
    line-height:1.25;
}

.res-meta {
    font-size:12px;
    color:var(--muted);
    font-weight:600;
    line-height:1.45;
    margin-top:5px;
}

.dot-label {
    color:#0f172a;
    font-weight:900;
}

.empty-box {
    background:#fff;
    border:2px dashed var(--border);
    border-radius:18px;
    padding:28px;
    text-align:center;
    color:#64748b;
    font-weight:800;
}

mark {
    background:#fff3bf;
    color:#000;
    padding:0 2px;
    border-radius:3px;
    font-weight:900;
}