:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --radius: 3px; --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --bg: #ffffff; --surface: #f5f6f8; --hover: #e9edf2; --text: #20262f;
  --muted: #536174; --border: #808c9b; --accent: #164fa3; --on-accent: #ffffff;
  --focus: #125ac2; --backdrop: #111820b3; color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #111419; --surface: #191e25; --hover: #252d38; --text: #e2e7ee;
  --muted: #a4b0c0; --border: #5b6b7f; --accent: #a0c5ff; --on-accent: #101c30;
  --focus: #b4d2ff; --backdrop: #000000b3; color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0 auto; max-width: 1500px; padding: 0 var(--space-6); background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); }
button, .button { display: inline-flex; align-items: center; justify-content: center; padding: 6px 10px; min-height: 34px; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.5; }
button:hover, .button:hover { background: var(--hover); }
button:disabled { opacity: .5; cursor: default; }
button[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); background: var(--hover); }
.button { border: 1px solid var(--border); border-radius: var(--radius); }
.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.primary:hover { background: var(--accent); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
input, select, textarea { width: 100%; min-width: 0; padding: 6px 8px; min-height: 36px; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
label { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
label > span, .hint, .domain, .subline { color: var(--muted); font-size: 12px; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 21px; font-weight: 650; letter-spacing: -.5px; }
h1 a { color: inherit; text-decoration: none; }
h2 { font-size: 19px; } h3 { font-size: 15px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6) 0; border-bottom: 1px solid var(--border); }
.preferences { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; }
.language-switch { display: flex; gap: 3px; }
main { padding: var(--space-6) 0 var(--space-4); }
.search-row { display: flex; align-items: end; gap: var(--space-2); }
.search-field { flex: 1; }
.filter-row { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: var(--space-3); margin-top: var(--space-4); }
#filter-help { margin-top: var(--space-2); }
.sort-row { display: flex; align-items: end; gap: var(--space-4); margin: var(--space-4) 0; }
#result-count { margin-left: auto; padding-bottom: var(--space-2); color: var(--muted); }
#filter-note, #revision-note { margin: var(--space-2) 0; }
#catalog-status:not(:empty) { padding: var(--space-4); border: 1px solid var(--border); margin-bottom: var(--space-3); background: var(--surface); }
#catalog-status button, #details-content > button { margin-top: var(--space-2); }
.table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; text-align: left; table-layout: fixed; }
th { font-size: 12px; color: var(--muted); background: var(--surface); font-weight: 600; }
th, td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
th:first-child { width: 26%; } th:nth-child(2) { width: 14%; } th:nth-child(3) { width: 10%; } th:last-child { width: 28%; }
tr:last-child td { border-bottom: 0; } tbody tr:hover { background: var(--surface); }
.mobile-version { display: none; }
.program-name { font-weight: 600; }
.subline { display: block; margin-top: var(--space-1); white-space: normal; overflow-wrap: anywhere; }
.mono { font-family: var(--mono); font-size: 12px; }
.actions { display: flex; gap: 5px; flex-wrap: wrap; }
.actions button, .actions .button { font-size: 12px; padding: 5px 8px; }
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-4); }
footer { padding: var(--space-4) 0 var(--space-6); border-top: 1px solid var(--border); }
#totals { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); margin: 0 0 var(--space-2); }
dl div { min-width: 0; } dt { color: var(--muted); font-size: 12px; } dd { margin: 0; overflow-wrap: anywhere; }
#totals div { display: flex; gap: var(--space-2); align-items: baseline; }
dialog { width: min(960px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: var(--space-6); background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); overflow-y: auto; overflow-wrap: anywhere; }
dialog::backdrop { background: var(--backdrop); }
.dialog-header { display: flex; justify-content: space-between; align-items: start; gap: var(--space-4); margin-bottom: var(--space-3); }
.dialog-header h2 { min-width: 0; }
.dialog-preferences { justify-content: end; margin-bottom: var(--space-4); }
.description { white-space: pre-wrap; margin-bottom: var(--space-4); }
.file { padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.file h3 { font-family: var(--mono); font-size: 13px; }
.metadata { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.hash { grid-column: 1 / -1; }
#copy-dialog { max-width: 600px; } #copy-dialog p, #copy-dialog label { margin-bottom: var(--space-3); }
#copy-value { font-family: var(--mono); resize: vertical; }
.copy-status { min-height: 21px; color: var(--accent); } body > .copy-status { position: fixed; bottom: 12px; right: 16px; }
.copy-status:not(:empty) { padding: var(--space-2) var(--space-3); border: 1px solid var(--border); background: var(--surface); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -80px; background: var(--bg); padding: var(--space-2); z-index: 10; }
.skip-link:focus { top: 8px; }
[hidden] { display: none !important; }
@media (max-width: 1100px) {
  th:last-child { width: 29%; } th:first-child { width: 24%; }
  .actions { flex-direction: column; align-items: start; }
}
@media (max-width: 700px) {
  body { padding: 0 var(--space-3); }
  .site-header { align-items: start; flex-direction: column; gap: var(--space-3); padding: var(--space-4) 0; }
  .filter-row { grid-template-columns: 1fr 1fr; }
  .filter-row label:first-child { grid-column: 1 / -1; }
  .sort-row { flex-wrap: wrap; gap: var(--space-2); }
  #result-count { width: 100%; margin-left: 0; }
  .search-row { flex-wrap: wrap; }
  .search-field { flex-basis: 100%; }
  table { min-width: 0; }
  th, td { padding: 8px 6px; }
  th:first-child { width: 45%; } th:nth-child(3) { width: 20%; } th:last-child { width: 35%; }
  th:nth-child(2), td:nth-child(2) { display: none; }
  .mobile-version { display: block; }
  .secondary { display: none; }
  .actions { align-items: stretch; }
  .actions button, .actions .button { white-space: normal; overflow-wrap: anywhere; min-height: 36px; padding: 5px 3px; }
  .metadata { grid-template-columns: 1fr 1fr; }
  dialog { padding: var(--space-4); }
  #totals { gap: var(--space-2) var(--space-4); }
}