/* -------- Base & Theme -------- */
:root{
    --bg: #0b0b0c;
    --fg: #e6e6e6;
    --muted: #9aa0a6;
    --accent: #4ade80;
    --paper: #111213;
    --caret: #4ade80;
    --shadow: 0 8px 40px rgba(0,0,0,.35);
    --maxw: 72ch;
  }
  .theme-light{
    --bg:#fbfbfc; --fg:#0e0e11; --muted:#6b7280; --accent:#06b6d4; --paper:#ffffff; --caret:#06b6d4; --shadow:0 8px 30px rgba(0,0,0,.08);
  }
  html,body{height:100%}
  *{box-sizing:border-box}
  body{
    margin:0; font: 16px/1.75 "IBM Plex Mono", ui-monospace, monospace;
    background:var(--bg); color:var(--fg);
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
    display:flex; flex-direction:column;
  }
  
  /* -------- Top Bar -------- */
  .bar{
    position:sticky; top:0; z-index:10; display:flex; gap:.5rem; align-items:center; justify-content:space-between;
    padding:.75rem 1rem; backdrop-filter:saturate(160%) blur(8px);
    background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.12));
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .theme-light .bar{background:linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,.3)); border-bottom:1px solid rgba(0,0,0,.06)}
  .brand{display:flex; align-items:center; gap:.6rem; letter-spacing:.5px; font-weight:600; flex-wrap:wrap}
  .brand-name{font-size:1.1rem}
  .tagline{font-size:.9rem}
  .dot{display:inline-block; width:.5rem; height:.5rem; border-radius:999px; background:var(--accent); box-shadow:0 0 0 3px rgba(74,222,128,.15)}
  .muted{color:var(--muted); font-weight:500}
  
  /* -------- Controls -------- */
  .controls{display:flex; gap:.4rem; align-items:center; flex-wrap:wrap}
  button, .chip{
    appearance:none; border:1px solid rgba(255,255,255,.14); color:var(--fg); background:transparent; cursor:pointer;
    padding:.45rem .7rem; border-radius:.75rem; font-weight:600;
    display:flex; align-items:center; justify-content:center;
    transition:transform .04s ease, background .15s ease, border-color .15s ease; user-select:none;
    font-size:1rem;
  }
  button i{font-size:1.2rem; pointer-events:none}
  .theme-light button, .theme-light .chip{border-color:rgba(0,0,0,.12)}
  button:hover{background:rgba(255,255,255,.06)}
  .theme-light button:hover{background:rgba(0,0,0,.04)}
  button:active{transform:translateY(1px)}
  .primary{border-color:transparent; background:var(--accent); color:#0b0b0c}
  .primary:hover{filter:brightness(.96)}
  /* .chip{border-style:dashed; font-weight:500; padding:.45rem .7rem} */
  
  /* -------- Editor Card -------- */
  .wrap{display:flex; justify-content:center; padding:3.5rem 1rem 4rem}
  .card{
    width:100%; max-width:var(--maxw); background:var(--paper); border-radius:1.25rem; box-shadow:var(--shadow);
    padding: clamp(1.25rem, 2vw, 2rem) clamp(1.1rem, 3vw, 2.25rem);
    border:1px solid rgba(255,255,255,.06);
  }
  .theme-light .card{border:1px solid rgba(0,0,0,.06)}
  
  /* -------- Editor -------- */
  .editor{
    min-height:65vh; white-space:pre-wrap; word-break:break-word; outline:none; caret-color:var(--caret);
    font-size:clamp(1rem, 2.6vw, 1.125rem); line-height:1.8; letter-spacing:.2px;
  }
  
  /* -------- Footer Row -------- */
  .foot{display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:1rem; color:var(--muted)}
  .stat{font-variant-numeric:tabular-nums;}
  
  /* -------- Subtle helpers -------- */
  .hidden{display:none}
  .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  
  /* -------- Selection -------- */
  ::selection{background:rgba(74,222,128,.25)}
  .theme-light ::selection{background:rgba(37,99,235,.22)}
  
  /* -------- Mobile tweaks -------- */
@media (max-width:600px){
    .wrap{padding:2rem .8rem 3rem}
    .foot{flex-direction:column; align-items:flex-start}
    .brand{flex-direction:row; align-items:center; gap:.4rem} /* keep brand inline */
    .tagline{font-size:.8rem}
  
    /* key changes for bar */
    .bar{
      flex-direction:column;
      align-items:flex-start;
      gap:.75rem;
    }
    .controls{
      width:100%;
      justify-content:flex-start;
      flex-wrap:wrap;
      gap:.5rem;
    }
  }