:root { color-scheme: light dark; font-family: system-ui, sans-serif; }
body { margin: 0; padding: 1rem; }
main { max-width: 46rem; margin: 2rem auto; }
button { padding: .7rem 1rem; cursor: pointer; font: inherit; }
form { margin: 1rem 0; }
dt { font-weight: bold; margin-top: 1rem; }
dd { margin: .4rem 0; }
nav { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 2rem; }
label { display: block; margin: .8rem 0; }
input, select { padding: .5rem; font: inherit; max-width: 100%; box-sizing: border-box; }
article { border-top: 1px solid #888; padding: 1rem 0; overflow-wrap: anywhere; }
main { max-width: 64rem; }
button:disabled { cursor: not-allowed; opacity: .6; }
.setting { display: flex; align-items: end; flex-wrap: wrap; gap: .8rem; border-bottom: 1px solid #8885; padding-bottom: .6rem; }
.setting label { flex: 1; min-width: 12rem; }
.setting select { display: block; width: 100%; }
.table-scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .6rem; border-bottom: 1px solid #8885; }
.images { display: flex; flex-wrap: wrap; gap: 1rem; }
figure { margin: 0; max-width: 20rem; }
.saved-image { max-width: 100%; max-height: 20rem; object-fit: contain; }
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.friend-image { max-width: 8rem; max-height: 8rem; }
.fault { border-inline-start: .3rem solid #d06020; padding: .8rem; }
.filter-options { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 1rem 0; }
.filter-options label { display: flex; align-items: center; gap: .4rem; margin: 0; min-height: 44px; }
.filter-options input[type=checkbox] { width: 1.2rem; height: 1.2rem; }
@media (max-width: 36rem) { main { margin: .8rem auto; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } button { min-height: 44px; } }