*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; color: var(--tx); }
.wg { --c: #0e0e10; max-width: 520px; background: var(--sf); border: 1px solid var(--ln); border-radius: 18px; padding: 20px; }
.wg-t { font-weight: 800; font-size: 1.25rem; margin: 0 0 12px; }
#wgForm { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: grid; gap: 4px; font-size: .9rem; font-weight: 600; }
input, select { font: inherit; font-size: 1.05rem; padding: 10px 12px; border: 2px solid var(--ln); border-radius: 12px; min-height: 48px; width: 100%; background: var(--sf); color: var(--tx); }
input:focus, select:focus { outline: none; border-color: var(--c); }
.wg-out { margin-top: 16px; padding: 16px; border-radius: 14px; background: var(--c); color: #fff; display: grid; gap: 2px; }
.wg-out span { font-size: .9rem; opacity: .85; }
.wg-out strong { font-size: 2rem; font-weight: 800; line-height: 1.1; }
.wg-out small { font-size: .9rem; opacity: .9; }
.wg-legal { font-size: .78rem; color: var(--tx2); margin: 10px 0 0; }
.wg-by { font-size: .78rem; margin: 6px 0 0; text-align: right; }
.wg-by a { color: var(--tx2); }
@media (max-width: 420px) { #wgForm { grid-template-columns: 1fr; } }