body { background-color: #fff; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid black; padding: 8px; text-align: left; word-break: break-word; }
th:last-child, td:last-child { word-break: normal; }
th { background-color: #f4f4f4; }
.legend { font-size: 0.9em; margin-top: 20px; }
.legend span { display: block; }
.title { margin-bottom: 0; }
#input { width: 100%; }
#shareLink, #resultContainer, #code { display: none; }
#outputLink { background: #333; color: #fff; padding: 10px; width: auto; white-space: pre-wrap; word-wrap: break-word; }
#others { margin-top: 20px; }
#others a { text-decoration: none; }
#statusFilter { margin-bottom: 10px; }
#statusSummary { font-size: 0.9em; margin: 10px 0; }
#statusSummary span { display: inline-block; margin-right: 16px; }
th.sort { cursor: pointer; user-select: none; padding-right: 22px; position: relative; text-wrap: nowrap; }
th.sort:hover { background-color: #e6e6e6; }
th.sort::after { content: "\2195"; position: absolute; right: 8px; opacity: 0.35; font-size: 0.85em; }
th.sort.asc::after { content: "\2191"; opacity: 1; }
th.sort.desc::after { content: "\2193"; opacity: 1; }
.loadingIndicator { margin-left: 8px; font-style: italic; color: #555; }
button:disabled { cursor: not-allowed; opacity: 0.6; }