:root{--accent:#5b4a8a;--accent-soft:rgba(91,74,138,.12)}
body[data-site="difftext"] .brand-mark{background:var(--accent);color:#fff;font-size:.75rem}
.mode-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.mode-tab{border:1px solid var(--line,#d5cfbc);background:#fff;border-radius:999px;padding:.55rem 1rem;cursor:pointer;font:inherit}
.mode-tab.is-active{background:var(--accent);color:#fff;border-color:transparent}
.diff-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media(max-width:720px){.diff-grid{grid-template-columns:1fr}}
.diff-grid textarea{min-height:220px;width:100%;font-family:ui-monospace,monospace;font-size:.9rem}
.diff-out{background:#fff;border:1px solid var(--line,#d5cfbc);border-radius:12px;padding:.75rem;min-height:8rem;overflow:auto;font-family:ui-monospace,monospace;font-size:.88rem;line-height:1.55;white-space:pre-wrap}
.diff-out .add{background:#d8f3df}.diff-out .del{background:#f8d7da}.diff-out .same{opacity:.85}
.side-by-side{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.side-by-side .col{border:1px solid var(--line,#d5cfbc);border-radius:10px;padding:.5rem;min-height:8rem;white-space:pre-wrap;font-family:ui-monospace,monospace;font-size:.85rem}
.options{display:flex;flex-wrap:wrap;gap:.75rem 1.2rem;margin:.75rem 0}
.hint{color:var(--dim,#625f57);font-size:.9rem}

/* polish: mobile form comfort */
@media (max-width:700px){
  .studio-card label{display:block;margin:.55rem 0}
  .studio-card input[type=text],.studio-card input[type=url],.studio-card input[type=number],.studio-card input[type=search],.studio-card textarea,.studio-card select{width:100%;max-width:100%;box-sizing:border-box}
  .mode-tabs{gap:.35rem}
  .mode-tab{padding:.5rem .85rem;font-size:.9rem}
  #out,pre#out{font-size:.82rem}
}