:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.6 -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
       background: #f6f7f9; color: #1a1a1a; }
@media (prefers-color-scheme: dark) { body { background: #16181c; color: #e8e8e8; } }
.wrap { max-width: 760px; margin: 0 auto; padding: 24px 16px 64px; }
h1 { font-size: 20px; margin: 0 0 4px; }
.sub { color: #888; font-size: 13px; margin: 0 0 20px; }
.card { background: #fff; border: 1px solid #e4e6ea; border-radius: 12px; padding: 18px; margin: 14px 0; }
@media (prefers-color-scheme: dark) { .card { background: #1e2127; border-color: #30343c; } }
.card h2 { font-size: 16px; margin: 0 0 4px; }
.card .desc { color: #888; font-size: 13px; margin: 0 0 12px; }
textarea { width: 100%; min-height: 96px; font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
           padding: 10px; border: 1px solid #d0d3d8; border-radius: 8px; background: #fbfbfc; color: inherit; resize: vertical; }
@media (prefers-color-scheme: dark) { textarea { background: #14161a; border-color: #30343c; } }
button { font: inherit; font-size: 14px; padding: 9px 16px; border-radius: 8px; border: 0; cursor: pointer;
         background: #10a37f; color: #fff; }
button:hover { background: #0e8e6f; }
button.ghost { background: transparent; color: #10a37f; border: 1px solid #10a37f; }
button:disabled { opacity: .5; cursor: default; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.ok { color: #10a37f; } .err { color: #e5484d; } .muted { color: #888; }
.status { font-size: 13px; margin-top: 8px; min-height: 18px; }
table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 14px; }
td, th { text-align: left; padding: 7px 8px; border-bottom: 1px solid #eceef1; }
@media (prefers-color-scheme: dark) { td, th { border-color: #2a2e35; } }
th { color: #888; font-weight: 500; width: 92px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; }
.pill.on { background: #e7f7f1; color: #0a7f60; } .pill.off { background: #fdecec; color: #c0362f; }
@media (prefers-color-scheme: dark){ .pill.on{background:#123328;color:#4bd6a8} .pill.off{background:#3a1e1e;color:#f08a86} }
code { background: #f0f1f3; padding: 1px 5px; border-radius: 4px; font-size: 12px; }
@media (prefers-color-scheme: dark) { code { background: #2a2e35; } }
details { margin-top: 10px; } summary { cursor: pointer; color: #888; font-size: 13px; }
.warn { background: #fff8e6; border: 1px solid #f0dca0; color: #8a6d1a; border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-top: 10px; }
@media (prefers-color-scheme: dark){ .warn{background:#2c2712;border-color:#5c4f1e;color:#e6cf7a} }