:root { color-scheme: light dark; --bg:#f4f1ea; --fg:#222; --card:#fff; --acc:#6b7a8f; }
@media (prefers-color-scheme: dark) { :root { --bg:#16181c; --fg:#e8e8e8; --card:#20242a; --acc:#9db3cf; } }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.5 system-ui,sans-serif; }
.wrap { max-width:560px; margin:0 auto; padding:24px 16px 48px; }
h1 { margin:0 0 8px; }
a { color:var(--acc); }
.card { background:var(--card); border-radius:12px; padding:16px; margin:16px 0; box-shadow:0 1px 3px #0002; }
.row { display:flex; gap:8px; margin:8px 0; align-items:center; flex-wrap:wrap; }
.row input { flex:1; min-width:0; padding:8px; border:1px solid #8886; border-radius:8px; background:transparent; color:inherit; font:inherit; }
button { padding:8px 14px; border:0; border-radius:8px; background:var(--acc); color:#fff; font:inherit; cursor:pointer; }
button.ghost { background:transparent; color:var(--acc); border:1px solid var(--acc); }
/* an explicit display above would beat the UA [hidden] rule */
[hidden] { display:none !important; }
.fine { font-size:13px; opacity:.75; }
.status { margin:8px 0; min-height:1.4em; }
.status.err { color:#c0392b; }
.counts { font-size:14px; opacity:.85; }
#log { list-style:none; padding:0; margin:8px 0 0; font-size:13px; max-height:260px; overflow:auto; }
#log li { padding:2px 0; }
footer { margin-top:32px; font-size:13px; opacity:.8; }
textarea { width:100%; box-sizing:border-box; padding:8px; border:1px solid #8886; border-radius:8px; background:transparent; color:inherit; font:inherit; resize:vertical; }
.purse { font-size:18px; margin-bottom:8px; }
code { background:#8882; padding:0 4px; border-radius:4px; }