:root { color-scheme: light; font-family: "Noto Sans CJK SC", "PingFang SC", sans-serif; color: #24332e; background: #f5f3ed; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 1320px; margin: auto; padding: 40px 28px; }
header { border-top: 5px solid #226448; padding-top: 18px; } .brand { font: 12px monospace; letter-spacing: .15em; color: #226448; }
h1 { font-size: 36px; margin: 8px 0 28px; } h2 { font-size: 20px; margin: 0 0 20px; } section { border-top: 1px solid #cbd0c5; padding: 28px 0; }
form { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; } label { display: grid; gap: 6px; font-size: 14px; }
input, select, textarea, button { font: inherit; padding: 9px 12px; border: 1px solid #a4ada3; border-radius: 3px; background: #fffef9; color: inherit; }
input[type=checkbox] { accent-color: #226448; } label:has(input[type=checkbox]) { display: flex; align-items: center; padding: 10px 0; }
textarea { width: min(650px, 80vw); } input[type=number] { width: 110px; } button { cursor: pointer; background: #226448; color: white; border-color: #226448; }
button[type=reset], .pages button { background: transparent; color: #226448; } button:disabled { cursor: default; opacity: .5; } :focus-visible { outline: 3px solid #bb7a1c; outline-offset: 3px; }
.scroll { overflow-x: auto; margin: 16px 0; } table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13px; } th { color: #4e5d50; background: #e8ebe1; white-space: nowrap; }
th, td { padding: 11px 12px; border-bottom: 1px solid #d9dcd2; vertical-align: top; } td button { padding: 5px 10px; margin: 0 6px 6px 0; } td select, td input { max-width: 260px; }
.pages { display: flex; gap: 12px; align-items: center; } pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; } #message { min-height: 24px; color: #9a351b; }
@media (max-width: 600px) { main { padding: 24px 16px; } form { align-items: stretch; } input:not([type=checkbox]), select { max-width: 85vw; } }