:root {
  color-scheme: dark;
  --bg: #11131a;
  --panel: #1b1f2a;
  --panel-strong: #222837;
  --line: #343b4d;
  --text: #f2f4f8;
  --muted: #aeb7c7;
  --accent: #8b9cff;
  --accent-soft: #252b4d;
  --warning: #f1b56d;
  --danger: #ff8f96;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: radial-gradient(circle at top right, #252a48 0, var(--bg) 40rem); color: var(--text); line-height: 1.55; }
.shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 3rem 0 2rem; }
.hero { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-bottom: 2.5rem; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: .5rem; font-size: clamp(2.6rem, 8vw, 5.5rem); letter-spacing: -.06em; line-height: .95; }
h2 { margin-bottom: .4rem; font-size: 1.25rem; }
h3 { margin-bottom: .75rem; font-size: 1.25rem; line-height: 1.2; }
.lead { max-width: 700px; margin-bottom: 0; color: var(--muted); font-size: 1.08rem; }
.eyebrow { margin-bottom: .8rem; color: var(--accent); font-size: .72rem; font-weight: 800; letter-spacing: .14em; }
.hero-stat { min-width: 125px; padding: 1rem 1.2rem; border: 1px solid var(--line); border-radius: 1rem; background: #171b27cc; text-align: right; }
.hero-stat strong { display: block; font-size: 2.2rem; line-height: 1; }
.hero-stat span, .muted { color: var(--muted); }
.notice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.notice, .controls, .item-card { border: 1px solid var(--line); border-radius: 1rem; background: #171b27dd; box-shadow: 0 12px 30px #00000018; }
.notice { padding: 1.25rem; }
.notice-accent { border-color: #5968ba; background: linear-gradient(135deg, #202748, #171b27); }
.notice p:last-child, .notice li:last-child { margin-bottom: 0; }
.notice ul { margin: 0; padding-left: 1.2rem; color: var(--muted); }
.notice li + li { margin-top: .45rem; }
.controls { margin-bottom: 1.25rem; padding: 1.25rem; }
.controls-heading, .result-bar, .item-topline { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.controls-heading { margin-bottom: 1rem; }
.controls-heading h2 { margin-bottom: 0; }
.button { border: 1px solid var(--line); border-radius: .65rem; padding: .6rem .8rem; color: var(--text); background: var(--panel-strong); cursor: pointer; }
.button:hover, .button:focus-visible { border-color: var(--accent); }
.filter-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field-search { grid-column: span 2; }
.field span { color: var(--muted); font-size: .78rem; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: .6rem; padding: .68rem .7rem; color: var(--text); background: #11141d; font: inherit; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.result-bar { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.item-card { padding: 1.15rem; }
.item-card.is-exclusion { border-color: #8a5d45; background: linear-gradient(145deg, #2b211f, #171b27); }
.item-id { color: #7f8ba3; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; overflow-wrap: anywhere; }
.exclusion-badge { color: var(--warning); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .9rem; }
.chip { display: inline-flex; border: 1px solid #3b4560; border-radius: 999px; padding: .2rem .5rem; color: #d7dcf8; background: var(--accent-soft); font-size: .72rem; }
.chip-high, .chip-severe, .chip-extreme, .chip-irreversible, .chip-poorly_reversible { border-color: #85505c; color: #ffd1d3; background: #3b222e; }
.item-card p { margin-bottom: 0; }
.exclusion-reason { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid #644238; color: #f2c4a6; font-size: .9rem; }
.empty-state { padding: 3rem; border: 1px dashed var(--line); border-radius: 1rem; color: var(--muted); text-align: center; }
.footer { display: flex; flex-wrap: wrap; gap: 1rem 2rem; margin-top: 2rem; padding: 1rem 0; border-top: 1px solid var(--line); color: #7f8ba3; font-size: .78rem; }
@media (max-width: 850px) { .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-search { grid-column: span 2; } .catalog, .notice-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .shell { width: min(100% - 1rem, 1180px); padding-top: 1.5rem; } .hero { align-items: start; flex-direction: column; gap: 1rem; } .hero-stat { text-align: left; } .filter-grid { grid-template-columns: 1fr; } .field-search { grid-column: auto; } }