:root { --bg: #0d0c0a; --card: #16140f; --ink: #f4efe4; --muted: #a59d8c; --rule: #2c281f; --gold: #d4b26a; --down: #e07a6b; }
@media (prefers-color-scheme: light) { :root { --bg: #fbf8f1; --card: #ffffff; --ink: #1b1913; --muted: #6b6455; --rule: #e6dfcf; --gold: #8a6a1f; --down: #b3412f; } }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.wg { max-width: 520px; margin: 0 auto; padding: 14px; }
.wg h1 { font-size: 16px; margin: 0 0 10px; }
.wg form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.wg label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.wg input, .wg select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 8px; padding: 7px 8px; width: 100%; }
.wg button { grid-column: 1 / -1; font: 600 14px/1 inherit; background: var(--gold); color: #0d0c0a; border: 0; border-radius: 999px; padding: 10px; cursor: pointer; }
.wg .out { margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); }
.wg .out b { color: var(--gold); font-size: 18px; }
.wg .err { color: var(--down); margin: 8px 0 0; }
.wg .fine { font-size: 11px; color: var(--muted); margin: 8px 0 0; }
.wg .by { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; }
.wg a { color: var(--gold); }
.wg table { width: 100%; border-collapse: collapse; }
.wg td { border-top: 1px solid var(--rule); padding: 6px 4px; vertical-align: top; }
.wg td.t { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.wg tr.hi td.n { font-weight: 600; } .wg .im { color: var(--gold); font-size: 11px; }
.wg .tabs { display: flex; gap: 10px; margin: 0 0 8px; font-size: 12px; }
@media (max-width: 360px) { .wg form { grid-template-columns: 1fr; } }