* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: #222; background: #f5f6f8; }
header { background: #1a2b4a; color: #fff; padding: 14px 22px; display: flex; justify-content: space-between; align-items: center; }
header h1 { margin: 0; font-size: 18px; font-weight: 600; }
header .sub { margin: 4px 0 0; font-size: 12px; color: #c0c9d8; }
header .disclaimer { margin: 0; max-width: 420px; font-size: 11px; color: #c0c9d8; line-height: 1.4; text-align: right; }
header .disclaimer strong { color: #e8a838; }

main { display: grid; grid-template-columns: 320px 1fr; min-height: calc(100vh - 58px); }

aside#filters { background: #fff; border-right: 1px solid #d8dce3; padding: 16px; overflow-y: auto; max-height: calc(100vh - 58px); }
aside section { padding: 10px 0 14px; border-bottom: 1px solid #eef0f3; }
aside section:last-of-type { border-bottom: none; }
aside h2 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #58607a; }
aside label { display: block; margin: 6px 0; font-size: 13px; }
aside label:has(input[type=radio]), aside label:has(input[type=checkbox]) { font-weight: normal; cursor: pointer; }
aside input[type=number], aside select { width: 100%; padding: 6px 8px; font: inherit; border: 1px solid #c4cad4; border-radius: 4px; background: #fff; }
aside input[type=checkbox], aside input[type=radio] { margin-right: 6px; }
aside .hint { font-size: 12px; color: #6a7085; line-height: 1.4; margin: 4px 0 0; }
aside strong { color: #c0392b; }
button#reset { width: 100%; margin-top: 8px; padding: 8px; font-size: 13px; background: #4d5f7e; color: #fff; border: none; border-radius: 4px; cursor: pointer; }
button#reset:hover { background: #3a4a66; }

section#results { padding: 16px 22px; overflow: auto; }
#resultsHeader { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
#resultsHeader h2 { margin: 0; font-size: 16px; }
#resultsHeader button { padding: 6px 12px; font-size: 13px; border: 1px solid #1a2b4a; background: #1a2b4a; color: #fff; border-radius: 4px; cursor: pointer; }
#resultsHeader button:disabled { opacity: 0.4; cursor: not-allowed; }

table#resultTable { width: 100%; border-collapse: collapse; background: #fff; font-size: 12.5px; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
table#resultTable th, table#resultTable td { text-align: left; padding: 7px 10px; border-bottom: 1px solid #eef0f3; vertical-align: top; }
table#resultTable thead th { background: #f0f2f6; font-weight: 600; color: #3a4258; position: sticky; top: 0; }
table#resultTable th.sort { cursor: pointer; user-select: none; }
table#resultTable th.sort:hover { color: #1a2b4a; }
table#resultTable tbody tr:hover { background: #f7f9fc; }
table#resultTable .score { font-family: "SF Mono", Menlo, monospace; font-weight: 600; color: #1a2b4a; }
table#resultTable .num { text-align: right; font-family: "SF Mono", Menlo, monospace; white-space: nowrap; }
table#resultTable .chem { font-size: 11px; background: #eef0f3; padding: 2px 6px; border-radius: 3px; display: inline-block; white-space: nowrap; }
table#resultTable .warn { color: #b5562a; font-size: 11px; line-height: 1.4; }
table#resultTable .why { color: #2f6b3a; font-size: 11px; line-height: 1.4; }
table#resultTable td.num.nodata { color: #bbb; }
table#resultTable a.tds { color: #1a4a8c; font-size: 11px; }
table#resultTable input[type=checkbox] { margin: 0; }
table#resultTable tbody tr.selected { background: #fff8d8; }
.hint { font-size: 12px; color: #6a7085; }

dialog#compareDialog { border: none; border-radius: 8px; padding: 0; max-width: 90vw; width: 1000px; box-shadow: 0 8px 40px rgba(0,0,0,0.3); }
dialog#compareDialog::backdrop { background: rgba(0,0,0,0.4); }
dialog#compareDialog .closeBtn { position: absolute; top: 8px; right: 10px; background: transparent; border: none; font-size: 24px; cursor: pointer; color: #888; }
#compareBody { padding: 22px; max-height: 85vh; overflow: auto; }
#compareBody table { width: 100%; border-collapse: collapse; }
#compareBody th, #compareBody td { text-align: left; padding: 6px 10px; border-bottom: 1px solid #eef0f3; font-size: 12px; vertical-align: top; }
#compareBody th { background: #f0f2f6; font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
#compareBody th.row { background: #fafbfd; }