/* Shared styles for the content pages (about, contact, guides, 404). Same theme as the converter. */
:root { --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --muted:#94a3b8; --head:#60a5fa; --border:#334155; --link:#60a5fa; --code:#0f172a; }
body.light { --bg:#f9fafb; --card:#ffffff; --text:#374151; --muted:#4b5563; --head:#1d4ed8; --border:#e5e7eb; --link:#0b63d4; --code:#f3f4f6; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; line-height:1.7; }
.site-header { max-width:860px; margin:0 auto; padding:18px 20px 0; display:flex; flex-wrap:wrap; gap:6px 18px; align-items:center; }
.site-header .brand { font-weight:700; font-size:20px; color:var(--head); text-decoration:none; margin-right:auto; }
.site-header a { color:var(--link); text-decoration:none; font-size:15px; }
.site-header a:hover, .site-footer a:hover { text-decoration:underline; }
.page { max-width:860px; margin:18px auto 40px; padding:28px 28px 36px; background:var(--card); border:1px solid var(--border); border-radius:12px; }
.page h1 { font-size:30px; line-height:1.25; margin:0 0 8px; color:var(--head); }
.page h2 { font-size:22px; margin:30px 0 8px; color:var(--head); }
.page h3 { font-size:18px; margin:22px 0 6px; }
.page a { color:var(--link); }
.page .lead { color:var(--muted); font-size:18px; margin:0 0 18px; }
.page .meta { color:var(--muted); font-size:14px; margin:0 0 18px; }
.page ul, .page ol { padding-left:24px; }
.page li { margin:4px 0; }
.page table { border-collapse:collapse; width:100%; margin:14px 0; font-size:15px; }
.page th, .page td { border:1px solid var(--border); padding:7px 10px; text-align:left; vertical-align:top; }
.page th { background:var(--code); }
.page code, .page .ex { background:var(--code); border-radius:5px; padding:1px 6px; }
.page .ex { display:block; padding:10px 14px; margin:10px 0; border-left:3px solid var(--head); border-radius:4px; }
.page .note { border:1px solid var(--border); border-left:4px solid var(--head); background:var(--code); border-radius:6px; padding:10px 14px; margin:16px 0; font-size:15px; }
.cta { display:inline-block; margin:14px 0 4px; padding:10px 18px; background:#2563eb; color:#fff !important; border-radius:8px; text-decoration:none; font-weight:600; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:18px 0; padding:0; list-style:none; }
.cards li { margin:0; }
.cards a { display:block; height:100%; padding:14px 16px; border:1px solid var(--border); border-radius:10px; text-decoration:none; color:var(--text); background:var(--code); }
.cards a:hover { border-color:var(--head); }
.cards strong { display:block; color:var(--head); margin-bottom:4px; }
.cards span { color:var(--muted); font-size:14px; }
.related { margin-top:30px; padding-top:14px; border-top:1px solid var(--border); }
.crumbs { font-size:14px; color:var(--muted); margin-bottom:12px; }
.site-footer { max-width:860px; margin:0 auto; padding:0 20px 40px; text-align:center; color:var(--muted); font-size:14px; }
.site-footer a { color:var(--link); text-decoration:none; margin:0 7px; white-space:nowrap; }
@media (max-width:600px) { .page { margin:12px 8px 30px; padding:20px 16px 28px; } .page h1 { font-size:25px; } }