:root {
  font-family: Inter, system-ui, sans-serif;
  background: var(--tg-theme-bg-color, #101216);
  color: var(--tg-theme-text-color, #f4f6f8);
}
* { box-sizing: border-box; }
body { margin: 0; background: inherit; color: inherit; }
main { max-width: 820px; margin: 0 auto; padding: 18px 14px 50px; }
header { display:flex; justify-content:space-between; gap:12px; align-items:center; }
h1 { margin:0; font-size:26px; }
h2 { margin-top:0; font-size:18px; }
p { color: var(--tg-theme-hint-color, #a5acb8); }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:16px 0; }
.card,.panel { border:1px solid color-mix(in srgb, currentColor 14%, transparent); background:var(--tg-theme-secondary-bg-color,#181c22); border-radius:14px; padding:14px; }
.card span { display:block; font-size:12px; opacity:.7; margin-bottom:4px; }
.card strong { font-size:19px; overflow-wrap:anywhere; }
.panel { margin:12px 0; }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
button,input { font:inherit; border-radius:10px; border:0; padding:11px 13px; }
button { background:var(--tg-theme-button-color,#2481cc); color:var(--tg-theme-button-text-color,#fff); cursor:pointer; }
button.secondary { background:var(--tg-theme-secondary-bg-color,#272d36); color:inherit; border:1px solid color-mix(in srgb,currentColor 18%,transparent); }
button.danger { background:#a52c3b; color:#fff; }
input { display:block; width:100%; margin:8px 0; background:var(--tg-theme-bg-color,#0d1014); color:inherit; border:1px solid color-mix(in srgb,currentColor 18%,transparent); }
pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:300px; overflow:auto; font-size:12px; }
#message { position:sticky; bottom:8px; padding:10px 12px; border-radius:10px; backdrop-filter:blur(12px); }
.good { background:#163b2a; color:#c8f6dc; }
.bad { background:#4a1f26; color:#ffd5d9; }
code { font-family:ui-monospace,SFMono-Regular,monospace; }
@media (min-width:700px) { .grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }