* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: #f4f6f5; color: #1b1f1d; line-height: 1.5; }
.box { max-width: 440px; margin: 0 auto; padding: 1.25rem 1rem 2rem; }
h1 { margin: 0.5rem 0 0.25rem; font-size: 1.6rem; }
form { display: grid; gap: 0.4rem; background: #fff; border: 1px solid #d9dfdc; border-radius: 12px; padding: 1rem; }
label { font-weight: 600; margin-top: 0.5rem; }
input, select { font: inherit; width: 100%; min-height: 44px; padding: 0.5rem 0.65rem; border: 1px solid #c4ccc8; border-radius: 8px; background: #fff; color: inherit; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid #f0b429; outline-offset: 2px; }
button { font: inherit; font-weight: 700; min-height: 48px; border: 0; border-radius: 10px; background: #1f5f4a; color: #fff; cursor: pointer; margin-top: 0.5rem; }
button:disabled { opacity: 0.7; cursor: progress; }
.total { margin: 0.75rem 0 0; font-size: 1.1rem; }
.muted { color: #55605b; }
.small { font-size: 0.9rem; margin: 0.25rem 0 0; }
.error { color: #a12a2a; background: #fde6e6; border-radius: 8px; padding: 0.5rem 0.75rem; margin: 0; }
.result { border-radius: 10px; padding: 0.75rem 1rem; margin-bottom: 1rem; background: #fff; border: 1px solid #d9dfdc; }
.result.ok { background: #e3f3e8; border-color: #bfe3cb; color: #1f6b3a; }
.result.bad { background: #fde6e6; border-color: #f3b9b9; color: #a12a2a; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.85rem; }
pre { background: #eef2f0; border-radius: 8px; padding: 0.6rem 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0.5rem 0; }
pre:empty { display: none; }
.demo { margin-top: 1.25rem; background: #fff; border: 1px solid #d9dfdc; border-radius: 12px; padding: 1rem; }
.demo h2 { font-size: 1.15rem; margin: 0 0 0.25rem; }
.demo h3 { font-size: 1rem; margin: 1rem 0 0.25rem; }
.row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
button.ghost, a.button { display: inline-flex; align-items: center; justify-content: center; background: #fff; color: #1f5f4a; border: 1px solid #1f5f4a; font-size: 0.92rem; padding: 0 0.85rem; min-height: 44px; border-radius: 10px; text-decoration: none; font-weight: 700; }
.scroll { overflow-x: auto; }
@media (max-width: 400px) { th, td { white-space: normal; } }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.4rem 0.35rem; border-bottom: 1px solid #e3e8e5; white-space: nowrap; }
th { color: #55605b; font-weight: 600; }
.st { font-weight: 700; }
.st-paid { color: #1f6b3a; }
.st-failed, .st-review { color: #a12a2a; }
.st-pending { color: #7a5a00; }
.flag { background: #fff4d6; color: #6b4e00; border-radius: 8px; padding: 0.5rem 0.75rem; font-weight: 600; font-size: 0.92rem; }
fieldset { border: 0; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.35rem; }
legend { font-weight: 600; margin-bottom: 0.3rem; }
.opt { display: flex; align-items: center; gap: 0.55rem; font-weight: 500; min-height: 44px; border: 1px solid #d9dfdc; border-radius: 8px; padding: 0 0.75rem; margin: 0; cursor: pointer; }
.opt input { width: 1.1rem; min-height: 0; height: 1.1rem; margin: 0; accent-color: #1f5f4a; }
.result h2 { font-size: 1.05rem; margin: 0 0 0.4rem; }
@media (prefers-color-scheme: dark) {
  body { background: #101413; color: #e4e9e6; }
  form, .demo, .result, input, select, .opt, button.ghost, a.button { background: #171c1a; border-color: #2c3532; color: inherit; }
  button.ghost, a.button { color: #8fd6b4; border-color: #8fd6b4; }
  pre { background: #1d2422; }
  a { color: #8fd6b4; }
  .muted, th { color: #a3aea9; }
  th, td { border-color: #2c3532; }
  .st-paid { color: #8fd6a6; } .st-failed, .st-review { color: #f2aaaa; } .st-pending { color: #f1cf86; }
  .result.ok { background: #13301f; color: #b9eccb; border-color: #23573a; } .result.bad { background: #3a1c1c; color: #f2c4c4; border-color: #6b2c2c; }
  .flag { background: #362a12; color: #f1cf86; }
}