:root { font-family: system-ui, sans-serif; color: #202d29; background: #f5f7f6; font-size: 16px; line-height: 1.5; letter-spacing: 0; --green: #176343; --line: #d5dfda; }
* { box-sizing: border-box; }
body { margin: 0; }
header { display: flex; gap: 14px; align-items: center; padding: 20px max(20px, calc((100% - 1160px)/2)); background: #fff; border-bottom: 1px solid var(--line); }
header img { flex: 0 0 36px; }
h1 { margin: 0; font-size: 20px; line-height: 1.3; }
h1 span { display: block; font-size: 15px; font-weight: 500; }
.mode { margin: 6px 0 0; color: #704912; font-size: 14px; }
main { max-width: 1200px; margin: auto; padding: 0 20px 40px; }
section { padding: 20px 0; border-bottom: 1px solid var(--line); }
h2 { font-size: 18px; margin: 0 0 14px; }
button, input, select { font: inherit; min-height: 44px; border-radius: 5px; }
button { border: 1px solid #98b2a5; background: #fff; color: #174632; padding: 9px 14px; cursor: pointer; }
button:hover:enabled { background: #e9f2ed; }
button:disabled { opacity: .5; cursor: default; }
button[type=submit], #login { background: var(--green); color: #fff; border-color: var(--green); }
button[type=submit]:hover:enabled, #login:hover:enabled { background: #104b32; }
input, select { width: 100%; padding: 8px 10px; border: 1px solid #a8b9b0; background: white; color: inherit; min-width: 0; }
label { display: grid; gap: 4px; font-size: 14px; min-width: 0; }
:focus-visible { outline: 3px solid #256ca4; outline-offset: 3px; }
.session-line, .toolbar { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.session-line label { min-width: 170px; }
.identity { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; font-size: 13px; }
dt { color: #52665b; } dd { margin: 0; overflow-wrap: anywhere; font-family: ui-monospace, monospace; }
#status { margin-bottom: 0; min-height: 24px; font-weight: 600; overflow-wrap: anywhere; }
#status[data-state=FAIL] { color: #a12626; }
#status[data-state=PASS] { color: var(--green); }
.editor { display: grid; grid-template-columns: minmax(160px, 2fr) 90px 90px 1fr auto auto; align-items: end; gap: 12px; }
.toggle { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.toggle input { width: 22px; height: 22px; min-height: 22px; flex: 0 0 22px; accent-color: var(--green); }
.records { list-style: none; margin: 12px 0 0; padding: 0; }
.records li, .conflict { border-bottom: 1px solid var(--line); padding: 12px 0; overflow-wrap: anywhere; }
.records li:last-child { border-bottom: 0; }
.record-title { font-weight: 600; }
.metadata { color: #52665b; font-size: 14px; font-variant-numeric: tabular-nums; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-heading h2 { margin: 0; }
.conflict-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.badge { display: inline-block; font-size: 12px; padding: 2px 6px; border: 1px solid currentColor; border-radius: 4px; margin-right: 8px; }
.PASS { color: #176343; } .FAIL { color: #a12626; }
.skip { position: absolute; top: -80px; left: 8px; background: white; padding: 10px; z-index: 3; }.skip:focus { top: 8px; }
[hidden] { display: none !important; }
@media(max-width:1100px) { .editor { grid-template-columns: 2fr 1fr 1fr; } }
@media(max-width:600px) {
  header { padding: 16px; align-items: flex-start; } main { padding: 0 16px 32px; }
  .identity { grid-template-columns: 1fr; gap: 8px; } .editor { grid-template-columns: 1fr 1fr; }
  .editor > label:first-child, .editor > .toggle { grid-column: 1 / -1; }
  .editor > button { grid-column: 1 / -1; }
  .session-line > * { flex: 1 1 100%; } .toolbar > button { flex: 1 1 140px; }
  .toolbar .toggle { flex: 1 1 100%; } .conflict-actions > button { width: 100%; }
}