:root{
  --bg:#0b0f14; --panel:#0f1622; --muted:#9aa7b6; --fg:#e6edf3; --accent:#60a5fa; --border:#223046;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Inter,Helvetica,Arial,sans-serif;
  color:var(--fg); background:linear-gradient(180deg,#0b0f14 0%, #0c121a 100%);
}

.header{max-width:1200px;margin:0 auto;padding:24px 20px 12px}

/* CHANGED: stack logo + slogan vertically */
.brand{
  display:flex;
  flex-direction:column;   /* was row */
  gap:6px;                 /* tighter spacing under logo */
  align-items:flex-start;  /* left align stack */
}

h1{margin:0;font-size:20px;font-weight:800;letter-spacing:.2px}
.sub{color:var(--muted);font-size:22px}

.toolbar{max-width:1200px;margin:0 auto;padding:10px 20px 16px;display:flex;gap:12px;align-items:center}
select,input,textarea,button{font:inherit;color:var(--fg);background:var(--panel);border:1px solid var(--border);border-radius:8px}
select,input{padding:8px 10px}
textarea{width:100%;min-height:240px;padding:12px;resize:vertical}
button{padding:8px 12px;cursor:pointer}
button:hover{border-color:#2b3a4a}

main{max-width:1200px;margin:0 auto;padding:0 20px 0px}
#toolContainer{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:14px}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.button-row{display:flex;gap:8px;flex-wrap:wrap}

.note-wrapper{text-align:center;}
.footnote{max-width:100%;margin:0 auto;padding:20px;color:var(--muted);}
.footer {
  max-width: 100%;
  margin: 0 auto;       /* center horizontally */
  padding: 20px;           /* no padding at all */
  color: var(--muted);
  text-align: center;   /* text alignment */
}


/* Modal */
#resultModal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:9999}
#modalContent{
  position:relative;width:min(1100px,95vw);margin:5vh auto;background:var(--panel);
  border:1px solid var(--border);border-radius:12px;box-shadow:0 20px 50px rgba(0,0,0,.55);
}
.modalTop{
  display:flex;align-items:center;justify-content:space-between;padding:10px 10px 8px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--panel);border-top-left-radius:12px;border-top-right-radius:12px;z-index:2;
}
#modalTitle{margin:0;font-size:15px}
.modalActions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.muted{color:var(--muted);font-size:12px}
.wrapCtl{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.close{border:1px solid var(--border);background:transparent;border-radius:12px;color:var(--fg);width:32px;height:32px;cursor:pointer}

.viewer{
  max-height:70vh;overflow:auto;padding:12px;border-top:1px solid var(--border);
  background:#0f1520;border-bottom-left-radius:12px;border-bottom-right-radius:12px;
}
.viewer pre{margin:0}
.viewer code{display:block;font-size:12.5px;line-height:1.45}
.wrap-on pre{white-space:pre-wrap;word-break:break-word}
.wrap-off pre{white-space:pre;overflow:auto}

.purge-btn{
  position: fixed; right: 16px; bottom: 16px; z-index: 99999;
  padding: 8px 12px; border: 1px solid #444; border-radius: 8px;
  background: #111; color: #eee; font-weight: 600; cursor: pointer;
}
.purge-btn:hover{ filter: brightness(1.15); }

.purge-btn-inline {
  margin-left: 2rem;
  padding: 4px 8px;
  font-size: 0.9em;
  border: 1px solid #444;
  border-radius: 4px;
  background: #111;
  color: #eee;
  font-weight: 600;
  cursor: pointer;
}
.purge-btn-inline:hover {
  filter: brightness(1.15);
}

/* Logo sizing */
.logo-slot {
  width: 100%;
  max-width: 600px; /* let the container be bigger */
}

.logo-slot svg{
  display: flex;
  width:100%;
  max-width:1200px; /* was 900px */
  height:auto;
}

/* Toggle styling (matches your theme) */
.mode-toggle { display:flex; gap: 8px; align-items: center; justify-content: flex-start;}
.mode-btn{
  padding:4px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--panel); color:var(--fg); font-weight:600; cursor:pointer;
}
.mode-btn:hover{ border-color:#2b3a4a; filter:brightness(1.08); }
.mode-btn.active{ border-color:var(--accent); box-shadow:0 0 0 2px rgba(96,165,250,.25); }

/* Use brand colors for UI text: buttons vs labels */
button { color: var(--brandButton, var(--fg)); }
.toolbar label, #toolContainer label, p { color: var(--brandLabel, var(--muted)); }

/* --- WebZone logo intro animation --- */
@keyframes wzRibbonIn{to{opacity:1;transform:translateX(0) skewX(0)}}
@keyframes wzTextIn{60%{transform:translateX(0) skewX(0) scale(1.02)}100%{opacity:1;transform:translateX(0) skewX(0) scale(1)}}

.webzone-logo .ribbon-piece{
  opacity:0;
  transform:translateX(-60px) skewX(-10deg);
  animation:wzRibbonIn .55s cubic-bezier(.22,.77,.22,1) forwards;
  will-change:transform,opacity;
}

.webzone-logo .wordmark{
  opacity:0;
  transform:translateX(40px) skewX(6deg) scale(.98);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45));
  animation:wzTextIn .7s cubic-bezier(.22,.77,.22,1) .25s forwards;
  will-change:transform,opacity;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .webzone-logo .ribbon-piece,
  .webzone-logo .wordmark{animation:none;opacity:1;transform:none}
}

/* Diff coloring */
.diff-line { display:block; white-space:pre; }
.diff-eq  { color: #94a3b8; }                 /* slate-400 */
.diff-add { background: rgba(46,204,64,.12); color:#1a7f37; }   /* green-ish */
.diff-del { background: rgba(255,86,48,.12); color:#a40e26; }   /* red-ish  */

.rx { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }
.rx .tok-op       { color:#1e66f5; }      /* | ( ) [ ] ?: ?= ?! etc */
.rx .tok-quant    { color:#d97706; }      /* * + ? {m,n} */
.rx .tok-class    { color:#12b5a6; }      /* [...] and \d \w \s */
.rx .tok-assert   { color:#a40e26; }      /* ^ $ \b \B lookarounds */
.rx .tok-esc      { color:#6f42c1; }      /* escapes like \n \t \. */
.rx .tok-ref      { color:#0ea5e9; }      /* backrefs \1 \k<name> */
.rx .tok-char     { color:#334155; }      /* plain chars */
.rx .tok-dot      { color:#f43f5e; }      /* . */

/* matches rendering */
.rx-text { white-space: pre-wrap; line-height: 1.45; }
.rx-match { background: rgba(30,102,245,.12); outline: 1px solid rgba(30,102,245,.25); }
.rx-zero  { border-left: 2px solid #1e66f5; display:inline-block; height:1em; vertical-align: text-bottom; }
/* up to 8 capture groups with distinct hues */
.rx-g1 { background: rgba(255,159,10,.22); }
.rx-g2 { background: rgba(46,204,64,.22); }
.rx-g3 { background: rgba(255,99,132,.22); }
.rx-g4 { background: rgba(155,89,182,.22); }
.rx-g5 { background: rgba(41,128,185,.22); }
.rx-g6 { background: rgba(230,126,34,.22); }
.rx-g7 { background: rgba(231,76,60,.22); }
.rx-g8 { background: rgba(26,188,156,.22); }

/* small legend */
.rx-legend { font: 12px/1.4 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color:#475569; margin-top:.75rem; }
.rx-legend code { background:#f1f5f9; padding:.1rem .35rem; border-radius:.25rem; }

.themelabel { font-weight: bold; }

#textStatsInput {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  font: inherit;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}