/* ============================================================= */
/* 0️⃣  Global reset & fonts                                         */
/* ============================================================= */
*{box-sizing:border-box;}
body{
  margin:0;
  font-family:'Roboto',sans-serif;
  background:var(--bg);
  color:var(--fg);
  transition:background .3s,color .3s;
}
header{
  padding:1rem;
  background:var(--primary);
  color:white;
  text-align:center;          /* <-- NEW: center the header text */
}
h1{margin:0;font-size:1.8rem;font-weight:500;}
main{padding:2rem;max-width:860px;margin:auto;}
textarea{width:100%;font-family:monospace;font-size:.95rem;min-height:140px;padding:.75rem;border:1px solid var(--border);border-radius:4px;background:var(--input-bg);color:var(--input-fg);}
button{padding:.6rem 1.2rem;font-size:1rem;margin-top:.5rem;border:none;border-radius:4px;background:var(--primary);color:white;cursor:pointer;transition:background .2s;}
button:hover{background:var(--primary-dark);}
footer{margin-top:3rem;font-size:.9rem;text-align:center;color:var(--muted);}
.status{margin-left:.75rem;font-weight:500;}
.theme-toggle{position:fixed;bottom:1rem;right:1rem;background:var(--primary);color:white;opacity:.85;border:none;border-radius:4px;padding:.5rem .8rem;cursor:pointer;}
.theme-toggle:hover{opacity:1;}

/* ============================================================= */
/* 1️⃣  Spacing between sections                                  */
/* ============================================================= */
.input-section,
.controls,
.output-section{
  margin-bottom:1.5rem;        /* <-- NEW: add vertical space */
}

/* ============================================================= */
/* 2️⃣  CSS Variables – Material‑UI palette                        */
/* ============================================================= */
:root{
  /* Light theme – default */
  --primary:#66bb6a;           /* lighter green for dark mode */
  --primary-dark:#388e3c;       /* fallback (or use a darker shade) */
  --secondary:#9c27b0;          /* MUI secondary main */
  --error:#d32f2f;              /* MUI error main */
  --warning:#ed6c02;            /* MUI warning main */
  --info:#0288d1;               /* MUI info main */
  --success:#115293;            /* MUI success main */

  --bg:#fafafa;                  /* Surface */
  --fg:#212121;                  /* On surface */
  --border:#d0d0d0;              /* Input border */
  --input-bg:white;
  --input-fg:inherit;
  --muted:#757575;
}

/* ============================================================= */
/* 3️⃣  Prism token overrides (MUI colours)                          */
/* ============================================================= */
pre.json-output,
pre.json-output code,
pre.json-output *{
  background:var(--bg);
  color:var(--fg);
}

.token.property{color:var(--primary) !important;}        /* keys  */
.token.string  {color:var(--success) !important;}        /* strings */
.token.number  {color:var(--warning) !important;}        /* numbers */
.token.boolean {color:var(--info) !important;}           /* booleans */
.token.null    {color:var(--error) !important;}         /* null */
.token.punctuation{color:var(--secondary) !important;}   /* punctuation */
.token.comment {color:var(--secondary) !important;opacity:.7;}
.token.operator{color:var(--secondary) !important;}