:root{
  color-scheme: light;

  --bg: #ffffff;
  --fg: #111111;
  --muted: rgba(0,0,0,.75);

  --border: rgba(127,127,127,.35);
  --border2: rgba(127,127,127,.25);
  --row: rgba(127,127,127,.18);

  --control-bg: transparent;

  --th-bg: color-mix(in oklab, Canvas 92%, transparent);

  --option-bg: #ffffff;
  --option-fg: #111111;
  --option-hover: #e5e7eb;

  /* Select control (not dropdown options) */
  --select-bg: #ffffff;
  --select-fg: #111111;
}

:root[data-app-dark]{
  color-scheme: dark;

  --bg: #121212;
  --fg: #ffffff;
  --muted: rgba(255,255,255,.75);

  --border: rgba(255,255,255,.22);
  --border2: rgba(255,255,255,.16);
  --row: rgba(255,255,255,.12);

  --control-bg: rgba(255,255,255,.04);

  --th-bg: rgba(255,255,255,.06);

  --option-bg: #1e1e1e;
  --option-fg: #ffffff;
  --option-hover: #2a2a2a;

  --select-bg: #1a1a1a;
  --select-fg: #ffffff;
}

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

.meta{
  opacity: .75;
  font-size: 12px;
  color: var(--muted);
}

.controls input,
.controls select{
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  min-height: 36px;
  background: var(--control-bg);
  color: var(--fg);
}

/* IMPORTANT: force the SELECT control background */
.controls select{
  background-color: var(--select-bg);
  color: var(--select-fg);
  color-scheme: light; /* prevents “dark native select” in light mode */
}
:root[data-app-dark] .controls select{
  color-scheme: dark;
}

.tableWrap{
  overflow: auto;
  border: 1px solid var(--border2);
  border-radius: 10px;
}

table{
  border-collapse: collapse;
  width: 100%;
}

th, td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--row);
  vertical-align: top;
  color: var(--fg);
}

th{
  position: sticky;
  top: 0;
  background: var(--th-bg);
  cursor: pointer;
  white-space: nowrap;
}

/* Dropdown options (theme-aware) */
select option{
  background-color: var(--option-bg);
  color: var(--option-fg);
}
select option:hover,
select option:checked{
  background-color: var(--option-hover);
  color: var(--option-fg);
}