/* JsonFmt-style minimal CSS - pure static, mobile-first (SOP: viewport + mobile friendly) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
       color: #1a2332; background: #f7f9fc; line-height: 1.65; }
.site-header { background: #0f1b2d; color: #fff; padding: 14px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.site-header .brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.15rem; }
.site-header .brand .logo { color: #4cc38a; }
.site-header .tagline { margin: 0 0 0 auto; color: #b7c4d6; font-size: .9rem; }
main { max-width: 860px; margin: 0 auto; padding: 28px 20px 48px; }
h1 { font-size: 1.9rem; margin: .2em 0 .6em; line-height: 1.25; }
h2 { font-size: 1.35rem; margin: 1.6em 0 .5em; }
h3 { font-size: 1.08rem; margin: 1.2em 0 .4em; }
a { color: #0f6cbd; }
ul, ol { padding-left: 1.4em; }
.toolbox { background: #fff; border: 1px solid #dde5ee; border-radius: 10px; padding: 18px; margin: 18px 0; }
.toolbox textarea { width: 100%; min-height: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; padding: 10px; border: 1px solid #c3d0df; border-radius: 6px; }
.toolbox .row { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.btn { background: #0f6cbd; color: #fff; border: 0; border-radius: 6px; padding: 9px 16px; cursor: pointer; font-size: .95rem; }
.btn.secondary { background: #5a6b80; }
.output { white-space: pre-wrap; background: #0f1b2d; color: #9fe8c0; border-radius: 6px; padding: 12px; margin-top: 12px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; overflow: auto; min-height: 60px; }
.hero { background: linear-gradient(135deg, #0f1b2d, #17324f); color: #fff; border-radius: 12px; padding: 26px; margin-bottom: 20px; }
.hero p { color: #cfdae8; }
.back-home { margin-top: 26px; font-weight: 600; }
.site-footer { border-top: 1px solid #dde5ee; padding: 22px 20px; color: #5a6b80; text-align: center; font-size: .9rem; }
.site-footer .footer-nav a { margin: 0 10px; color: #0f6cbd; text-decoration: none; }
@media (max-width: 640px) { h1 { font-size: 1.5rem; } .site-header .tagline { display: none; } }