:root[data-palette="blue"] { --palette-bg:#f3f7ff; --palette-accent:#1d4ed8; --palette-bg-dark:#101827; --palette-accent-dark:#93c5fd; --palette-button:var(--palette-accent); --palette-button-dark:var(--palette-accent-dark); --palette-ink-dark:#102038; }
  :root[data-palette="purple"] { --palette-bg:#faf5ff; --palette-accent:#6d28d9; --palette-bg-dark:#1b1427; --palette-accent-dark:#c4b5fd; --palette-button:var(--palette-accent); --palette-button-dark:var(--palette-accent-dark); --palette-ink-dark:#24153b; }
  :root[data-palette="amber"] { --palette-bg:#fffbf3; --palette-accent:#92400e; --palette-bg-dark:#21180f; --palette-accent-dark:#fcd34d; --palette-button:var(--palette-accent); --palette-button-dark:var(--palette-accent-dark); --palette-ink-dark:#2c1b08; }
  :root[data-palette="slate"] { --palette-bg:#f4f6f8; --palette-accent:#334155; --palette-bg-dark:#111820; --palette-accent-dark:#cbd5e1; --palette-button:var(--palette-accent); --palette-button-dark:var(--palette-accent-dark); --palette-ink-dark:#172331; }

  :root { --bg:var(--palette-bg,#f5f7fb); --fg:#1d1d1b; --muted:#6b6b66; --card:#fff; --line:#e3e3de; --accent:var(--palette-accent,#174a8b); --accent-fg:#fff; --button-bg:var(--palette-button,#b42336); --button-fg:#fff; color-scheme: light; }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --bg:var(--palette-bg-dark,#101827); --fg:#ececea; --muted:#9a9a94; --card:#1e1e1c; --line:#2e2e2b; --accent:var(--palette-accent-dark,#93c5fd); --accent-fg:var(--palette-ink-dark,#102038); --button-bg:var(--palette-button-dark,#fda4af); --button-fg:var(--palette-ink-dark,#3b1020); color-scheme: dark; }
  }
  :root[data-theme="dark"] { --bg:var(--palette-bg-dark,#101827); --fg:#ececea; --muted:#9a9a94; --card:#1e1e1c; --line:#2e2e2b; --accent:var(--palette-accent-dark,#93c5fd); --accent-fg:var(--palette-ink-dark,#102038); --button-bg:var(--palette-button-dark,#fda4af); --button-fg:var(--palette-ink-dark,#3b1020); color-scheme: dark; }
  * { box-sizing: border-box; }
  body { margin:0; font:16px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
  header { border-bottom:1px solid var(--line); background:var(--card); }
  header .bar { max-width:860px; margin:0 auto; padding:.75rem 1rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
  header .brand { font-weight:600; color:var(--fg); text-decoration:none; margin-right:auto; }
  header nav { display:flex; gap:1rem; }
  header nav a { color:var(--muted); text-decoration:none; }
  header nav a[aria-current="page"] { color:var(--fg); font-weight:600; }
  #theme { display:grid; place-items:center; width:2.25rem; height:2.25rem; padding:0; background:transparent; color:var(--fg); border:1px solid var(--line); border-radius:999px; cursor:pointer; }
  #theme:hover { background:var(--bg); }
  #theme svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  #theme .sun, .is-dark #theme .moon { display:none; }
  .is-dark #theme .sun { display:block; }
  main { max-width:860px; margin:0 auto; padding:2rem 1rem 4rem; }
  h1 { margin:0 0 .25rem; font-size:1.6rem; }
  h2 { font-size:1.15rem; margin:2rem 0 .5rem; }
  p.lead { margin:0 0 1.5rem; color:var(--muted); }
  form { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; }
  input, select, button { font:inherit; padding:.6rem .75rem; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--fg); }
  input { flex:1 1 260px; }
  form button { background:var(--button-bg); color:var(--button-fg); border-color:var(--button-bg); cursor:pointer; }
  #status { color:var(--muted); font-size:.9rem; margin-bottom:.75rem; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:1rem; margin-bottom:.75rem; }
  .card h2 { font-size:1.1rem; margin:0 0 .25rem; }
  .meta { color:var(--muted); font-size:.9rem; }
  .details { white-space:pre-line; margin:.5rem 0 0; }
  a { color:var(--accent); overflow-wrap:anywhere; }
  pre { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:.75rem; overflow-x:auto; font-size:.85rem; }
  code { font-size:.9em; }
  .table-wrap { overflow-x:auto; }
  table { border-collapse:collapse; width:100%; font-size:.95rem; }
  th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
  th { color:var(--muted); font-weight:600; }

  [hidden] { display:none !important; }
  :focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
  button { cursor:pointer; }
  button:disabled { cursor:not-allowed; opacity:.55; }
  input, select { min-width:0; width:100%; }
  label { display:grid; gap:.3rem; font-size:.9rem; flex:1 1 160px; }
  label.search-field { flex:2 1 240px; }
  form { align-items:end; }
  form input { flex:initial; }
  .actions { display:flex; gap:.75rem; flex-wrap:wrap; align-items:center; margin:.75rem 0; }
  .actions a, summary { padding:.3rem 0; }
  .actions button { padding:.4rem .65rem; }
  .tags { display:flex; flex-wrap:wrap; gap:.35rem; padding:0; list-style:none; margin:.6rem 0; }
  .tags li { font-size:.8rem; padding:.15rem .55rem; border-radius:1rem; background:var(--bg); border:1px solid var(--line); }
  summary { cursor:pointer; color:var(--accent); }
  details .details { padding-bottom:.5rem; }
  .notice { border-left:3px solid var(--accent); padding:.75rem 1rem; background:var(--card); }
  .notice p { margin:.25rem 0; }
  .toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem; margin:1rem 0; }
  #pagination { display:flex; gap:.75rem; align-items:center; justify-content:center; margin:1.5rem 0; }
  #results[aria-busy="true"] { opacity:.6; }
  .freshness { color:var(--muted); font-size:.85rem; margin-top:2rem; padding-top:1rem; border-top:1px solid var(--line); }
  .freshness p { margin:.35rem 0; }
  .demo { border:1px solid var(--line); border-radius:10px; padding:1rem; background:var(--card); }
  .demo pre { max-height:32rem; background:var(--bg); }
  .demo label.key-field { flex-basis:100%; }
  .readable { white-space:pre-line; overflow-wrap:anywhere; }
  .skip { position:absolute; top:-10rem; left:1rem; background:var(--card); padding:.5rem; z-index:1; }
  .skip:focus { top:.5rem; }
  @media (max-width:520px) {
    main { padding-top:1.25rem; }
    form label { flex-basis:100%; }
    form > button { width:100%; }
    .card { padding:.85rem; }
    header .bar { gap:.65rem; }
  }
  @media print {
    header, form, button, .actions, #pagination, .no-print { display:none !important; }
    :root { --bg:#fff; --fg:#000; --muted:#333; --line:#ccc; --card:#fff; }
    main { max-width:none; padding:0; }
    .card { break-inside:avoid; }
  }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  #search-button { flex:1 1 auto; }
  textarea { width:100%; min-width:0; font:inherit; padding:.75rem; color:var(--fg); background:var(--card); border:1px solid var(--line); border-radius:8px; }
  [aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
  .print-only { display:none; }
  @media print {
    :root, :root[data-theme="dark"], :root:not([data-theme="light"]) { --bg:#fff; --fg:#000; --muted:#333; --line:#ccc; --card:#fff; --accent:#000; color-scheme:light; }
    .print-only { display:block; overflow-wrap:anywhere; }
    #copy-status, #copy-fallback, #shortlist-status { display:none !important; }
    h1, h2 { break-after:avoid; }
  }