* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 14px/1.4 -apple-system, "Segoe UI", Arial, sans-serif; color: #222; background: #f5f6f8; }

.topbar { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #fff; border-bottom: 1px solid #e3e6eb; }
.topbar h1 { margin: 0; font-size: 18px; font-weight: 600; }
.muted { color: #888; font-size: 13px; }

section { background: #fff; margin: 14px 20px; padding: 14px 16px; border: 1px solid #e3e6eb; border-radius: 6px; }

.filters, .generate { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 160px; }
.field label { font-size: 12px; color: #555; }
.field.actions { flex-direction: row; align-items: center; gap: 8px; }
.field.check label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

input[type="date"], select, input[type="text"] {
  height: 32px; padding: 0 8px; border: 1px solid #c4c8cf; border-radius: 4px; font: inherit; background: #fff;
}
input:focus, select:focus { outline: 2px solid #4a90e2; outline-offset: -1px; border-color: #4a90e2; }

button { height: 32px; padding: 0 14px; border-radius: 4px; cursor: pointer; font: inherit; border: 1px solid transparent; }
button.primary { background: #2d7ddb; color: #fff; border-color: #2d7ddb; }
button.primary:hover { background: #2266b8; }
button.primary:disabled { background: #9bbce6; border-color: #9bbce6; cursor: not-allowed; }
button.ghost { background: #fff; color: #444; border-color: #c4c8cf; }
button.ghost:hover { background: #f0f2f5; }

.results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.check-all { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th { background: #f0f2f5; text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600; color: #444; border-bottom: 1px solid #d8dce3; white-space: nowrap; }
tbody td { padding: 8px 10px; border-bottom: 1px solid #ececec; vertical-align: top; }
tbody tr:hover { background: #fafbfd; }
tbody tr.selected { background: #eaf3ff; }
tbody a.title-link { color: #2d7ddb; text-decoration: none; cursor: pointer; }
tbody a.title-link:hover { text-decoration: underline; }
.col-check { width: 30px; }

.toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 10px 16px; border-radius: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.2); z-index: 100; font-size: 13px; max-width: 80%; }
.toast.error { background: #b8392c; }
.toast.success { background: #2d8e4a; }
.toast.hidden { display: none; }

.empty { padding: 24px; text-align: center; color: #888; font-style: italic; }