:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.5; }
body { margin: 0 auto; max-width: 960px; padding: 24px; }
header, header form { display: flex; align-items: center; gap: 16px; }
header { justify-content: space-between; margin-bottom: 32px; }
.brand { letter-spacing: .18em; font-weight: 750; text-decoration: none; color: inherit; }
.panel { border: 1px solid #8886; border-radius: 10px; padding: 24px; margin-bottom: 24px; }
.narrow { max-width: 400px; margin: 48px auto; }
h1 { font-size: 1.65rem; margin-top: 0; } h2 { font-size: 1.15rem; }
label { display: block; margin: 16px 0 6px; } input { max-width: 100%; box-sizing: border-box; }
input:not([type=file]):not([type=hidden]) { width: 100%; padding: 10px; margin-bottom: 12px; }
button { padding: 9px 20px; cursor: pointer; border: 1px solid #888; border-radius: 5px; font: inherit; }
button:disabled { cursor: wait; opacity: .6; }
#drop-zone { padding: 30px 16px; border: 2px dashed #888; border-radius: 8px; }
#drop-zone.drag { border-color: #4b9cff; background: #4b9cff18; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid #8884; }
.table-wrap, pre { overflow: auto; } pre { padding: 12px; background: #8881; }
dd { margin: 0 0 14px; overflow-wrap: anywhere; } dt { font-weight: 650; }
.checks { list-style: none; padding-left: 0; } .message { font-size: 1.3rem; font-weight: 600; }
.error { color: light-dark(#a21414, #ff9d9d); } a { color: light-dark(#155ba7, #8fc3ff); }
footer { font-size: .8rem; opacity: .75; padding-bottom: 24px; }
@media (max-width: 540px) { body { padding: 16px; } .panel { padding: 16px; } header form span { display: none; } }