:root{--xeu-primary:#0d9488;--xeu-primary-dark:#0f766e;--xeu-surface:#ffffff;--xeu-surface-muted:#f4f6fb;--xeu-border:#e2e8f0;--xeu-text:#0f172a;--xeu-muted:#64748b;--xeu-shadow:0 4px 6px -1px rgba(0,0,0,0.08),0 2px 4px -1px rgba(0,0,0,0.04);--xeu-radius:12px;}
.xeu-tool{margin-bottom:2rem;}
.xeu-input-wrap,.xeu-output-wrap{display:flex;flex-direction:column;gap:0.5rem;margin-bottom:1rem;}
.xeu-label{font-size:0.8125rem;font-weight:600;color:var(--xeu-muted);}
.xeu-textarea{width:100%;min-height:160px;padding:1rem;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:0.9375rem;line-height:1.5;color:var(--xeu-text);background:var(--xeu-surface);border:1px solid var(--xeu-border);border-radius:var(--xeu-radius);resize:vertical;transition:border-color 0.2s,box-shadow 0.2s;}
.xeu-textarea:focus{outline:none;border-color:var(--xeu-primary);box-shadow:0 0 0 3px rgba(13,148,136,0.15);}
.xeu-textarea::placeholder{color:var(--xeu-muted);}
.xeu-textarea-readonly{background:var(--xeu-surface-muted);cursor:default;}
.xeu-actions{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:0.75rem;}
.xeu-btn{padding:0.625rem 1.25rem;font-size:0.875rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:background 0.2s,color 0.2s,transform 0.1s;}
.xeu-btn:active{transform:scale(0.98);}
.xeu-btn-escape{background:var(--xeu-primary);color:#fff;}
.xeu-btn-escape:hover{background:var(--xeu-primary-dark);color:#fff;}
.xeu-btn-unescape{background:var(--xeu-surface);color:var(--xeu-primary);border:2px solid var(--xeu-primary);}
.xeu-btn-unescape:hover{background:rgba(13,148,136,0.08);}
.xeu-btn-outline{background:var(--xeu-surface);color:var(--xeu-text);border:1px solid var(--xeu-border);}
.xeu-btn-outline:hover{background:var(--xeu-surface-muted);border-color:var(--xeu-muted);}
.xeu-btn-copy{margin-left:auto;}
.xeu-stats{font-size:0.8125rem;color:var(--xeu-muted);margin-bottom:1rem;}
.xeu-stats-sep{margin:0 0.35rem;}
.xeu-status{font-weight:600;}
.xeu-status.is-valid{color:#059669;}
.xeu-status.is-invalid{color:#dc2626;}
.xeu-ref{margin-top:1.5rem;padding:1.25rem;background:var(--xeu-surface-muted);border:1px solid var(--xeu-border);border-radius:var(--xeu-radius);}
.xeu-ref-heading{font-size:1rem;font-weight:700;margin:0 0 1rem;color:var(--xeu-text);}
.xeu-ref-list{display:flex;flex-wrap:wrap;gap:0.75rem;}
.xeu-ref-item{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;background:var(--xeu-surface);border-radius:8px;border:1px solid var(--xeu-border);font-size:0.8125rem;}
.xeu-ref-char{font-weight:700;min-width:1.25rem;}
.xeu-ref-entity{font-family:ui-monospace,monospace;padding:0.125rem 0.35rem;background:var(--xeu-surface-muted);border-radius:4px;}
.xeu-ref-desc{color:var(--xeu-muted);}
@media (min-width:768px){.xeu-tool{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto auto;grid-template-areas:"input input" "actions actions" "stats stats" "output output" "ref ref";gap:0 1.5rem;}
.xeu-input-wrap{grid-area:input;}
.xeu-actions{grid-area:actions;}
.xeu-stats{grid-area:stats;}
.xeu-output-wrap{grid-area:output;}
.xeu-ref{grid-area:ref;}
.xeu-textarea{min-height:220px;}
}
@media (min-width:992px){.xeu-tool{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;grid-template-areas:"input output" "actions actions" "stats stats" "ref ref";}
.xeu-input-wrap{grid-area:input;}
.xeu-output-wrap{grid-area:output;}
.xeu-actions{grid-area:actions;}
.xeu-stats{grid-area:stats;}
.xeu-ref{grid-area:ref;}
.xeu-textarea{min-height:280px;}
}