:root{
  --bg: #ffffff;
  --text: #111827;
  --muted: #4b5563;
  --card: #f6f7f8;
  --border: #e5e7eb;

  /* Brand */
  --brand-grey: #3f4851;
  --brand-green: #41b23b;

  /* UI accents */
  --link: #1f7a1f;
  --pill: #eef7ee;
  --input-bg: #ffffff;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Dark theme based on your logo palette */
    --bg: #121b22;
    --card: #202931;
    --border: #2f3841;

    --text: #eef2f4;
    --muted: #aab4bd;

    --brand-grey: #3f4851;
    --brand-green: #41b23b;

    --link: #6cd960;
    --pill: #1f2c23;
    --input-bg: #202931;
  }
}


* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:10px;
}

.logo{
  height:48px;
}

.logo.dark{ display:none; }

@media (prefers-color-scheme: dark){
  .logo.light{ display:none; }
  .logo.dark{ display:block; }
}


a{ color: var(--link); text-decoration: none; }
a:hover{ text-decoration: underline; }


.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px;
}

.muted {
    color: var(--muted);
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.h3 {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.filters {
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr 220px auto auto;
    align-items: center;
}

.filters input,
.filters select {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
}

/* Make native form controls render correctly in dark mode */
:root { color-scheme: light; }
@media (prefers-color-scheme: dark){
  :root { color-scheme: dark; }
}

/* Inputs/selects should not be transparent – it breaks dropdown panels */
.filters input,
.filters select{
  background: var(--input-bg);
}

/* Improve option readability (works in many browsers) */
select option,
select optgroup{
  background: var(--card);
  color: var(--text);
}


button,
.btn{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
  cursor: pointer;
}

button:hover,
.btn:hover{
  border-color: var(--brand-green);
}


.btn.secondary {
    opacity: 0.9;
}

.pill {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--pill);
    border: 1px solid var(--border);
    font-size: 0.85rem;
    margin-bottom: 10px;
}

.disclaimer {
    margin-top: 14px;
}

@media (max-width: 800px) {
    .filters {
        grid-template-columns: 1fr;
    }
}