:root {
  --esmo-blue: #003e7e;
  --border: #d0d7de;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1f2328;
}

body { margin: 0; background: #f6f8fa; }
header { background: var(--esmo-blue); color: #fff; padding: 1rem 2rem; }
header h1 { margin: 0; font-size: 1.4rem; }
header a { color: #fff; }
main { max-width: 1100px; margin: 0 auto; padding: 1rem 2rem 3rem; }
section { background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.5rem; margin-top: 1rem; }
h2 { font-size: 1.1rem; margin-top: 0; }
h3 { font-size: 0.95rem; margin: 0.5rem 0; }
.hint { color: #59636e; font-size: 0.9rem; }
label { display: inline-flex; flex-direction: column; font-size: 0.85rem; margin: 0 1rem 0.5rem 0; }
input { padding: 0.45rem; border: 1px solid var(--border); border-radius: 6px; min-width: 16rem; }
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.5rem 0; }
button { padding: 0.5rem 0.9rem; border: 0; border-radius: 6px; background: var(--esmo-blue); color: #fff; cursor: pointer; }
button.secondary { background: #e7ecf2; color: var(--esmo-blue); }
button.danger { background: #b42318; }
button:disabled { opacity: 0.5; cursor: default; }
details { margin-top: 0.75rem; }
summary { cursor: pointer; font-weight: 600; }
.tokens { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
pre { background: #0d1117; color: #e6edf3; padding: 0.75rem; border-radius: 6px; overflow: auto; font-size: 0.8rem; max-height: 22rem; }
#log { max-height: 16rem; }
code { background: #eef1f4; padding: 0 0.25rem; border-radius: 4px; }
@media (max-width: 800px) { .tokens { grid-template-columns: 1fr; } }