:root {
  --bg: #0b0f14;
  --panel: #121821;
  --text: #ecf5ff;
  --muted: #9ab;
  --accent: #6ec1ff;
  --border: #203042;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }

header { padding: 20px 24px; border-bottom: 1px solid var(--border);}
h1 { margin: 0; font-weight: 700; font-size: 20px; }
section { padding: 16px 24px; }
.muted { color: var(--muted); }

.controls .control-row { display:flex; gap:12px; align-items:center; flex-wrap: wrap; }
label { display:flex; gap:6px; align-items:center; }
input[type="text"], input[type="date"], input[type="number"], select {
  padding:8px 10px; border:1px solid var(--border); border-radius:8px; background: #0d131b; color: var(--text);
}
button, .button {
  padding:8px 12px; border:1px solid var(--border); border-radius:8px; background: #102032; color: var(--text); cursor:pointer; text-decoration:none;
}
button:hover, .button:hover { border-color: var(--accent); }
.or { color: var(--muted); }

.date-stats { display:flex; gap:8px; flex-wrap: wrap; }
.badge, .chip {
  border:1px solid var(--border);
  padding:4px 8px; border-radius:999px; background:#101820; color: var(--muted); font-size: 12px;
}
.chip { cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--accent); color: var(--text); }

.group { margin: 14px 0; border:1px solid var(--border); border-radius:10px; overflow: hidden; background: var(--panel); }
.group > .group-header { padding:10px 14px; background:#0f1721; display:flex; justify-content:space-between; align-items:center; cursor: pointer; }
.group > .group-header:hover { background:#101a28; }
.group > .group-body { padding:8px 14px 14px; }

.table { width:100%; border-collapse: collapse; }
.table th, .table td { border-bottom:1px solid var(--border); padding:8px 6px; text-align:left; font-size: 14px; }
.table th { color: var(--muted); }

.btn-icon {
  display:inline-block; padding:4px 8px; border:1px solid var(--border); border-radius:6px; background:#0f1824; text-decoration:none; color: var(--text);
  margin-right:6px; font-size: 12px;
}
.btn-icon:hover { border-color: var(--accent); }

.star { cursor: pointer; font-size: 16px; user-select: none; }
.star.on { color: #ffd479; }
.star.off { color: #566; }

#resultInfo { color: var(--muted); margin-bottom: 8px; }

.paginator { display:flex; gap:10px; align-items:center; margin-top: 8px; }