
.toolroll-app.toolroll-regex-tester { width:100%; box-sizing:border-box; padding:1rem; border:1px solid #d7dce2; border-radius:8px; background:#fff; color:#202124; }
.toolroll-app.toolroll-regex-tester * { box-sizing:border-box; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__field { min-width:0; margin-bottom:1rem; }
.toolroll-app.toolroll-regex-tester label,
.toolroll-app.toolroll-regex-tester legend { font-weight:600; }
.toolroll-app.toolroll-regex-tester textarea { width:100%; margin-top:.35rem; padding:.7rem; border:1px solid #9aa0a6; border-radius:5px; font:inherit; background:#fff; color:inherit; }
.toolroll-app.toolroll-regex-tester textarea { resize:vertical; min-height:8rem; }
.toolroll-app.toolroll-regex-tester [data-role="pattern"],
.toolroll-app.toolroll-regex-tester [data-role="replacement"] { min-height:5rem; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__hint { margin:-.65rem 0 1rem; color:#5f6368; font-size:.925rem; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__options { display:flex; flex-wrap:wrap; gap:.75rem 1.25rem; margin:0 0 1rem; padding:.75rem; border:1px solid #d7dce2; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__options legend { padding:0 .25rem; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__options label { display:flex; align-items:center; gap:.4rem; font-weight:400; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__actions { display:flex; flex-wrap:wrap; gap:.65rem; margin-bottom:1rem; }
.toolroll-app.toolroll-regex-tester button { padding:.7rem 1rem; border:1px solid #1769aa; border-radius:5px; font:inherit; font-weight:600; cursor:pointer; background:#fff; color:#1769aa; }
.toolroll-app.toolroll-regex-tester [data-action="process"] { background:#1769aa; color:#fff; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__results { margin-bottom:1rem; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__summary { font-weight:600; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__matches { display:grid; gap:.75rem; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__match { min-width:0; padding:.75rem; border:1px solid #d7dce2; border-radius:6px; background:#f8f9fa; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__match-title { margin:0 0 .5rem; font-weight:700; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__match-row { display:grid; grid-template-columns:minmax(7rem,auto) minmax(0,1fr); gap:.5rem; margin:.25rem 0; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__match-label { font-weight:600; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__match-value { min-width:0; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__copy { text-align:right; }
.toolroll-app.toolroll-regex-tester button:disabled { opacity:.55; cursor:not-allowed; }
.toolroll-app.toolroll-regex-tester :focus-visible { outline:3px solid #f6b73c; outline-offset:2px; }
.toolroll-app.toolroll-regex-tester [data-state="error"] { color:#b3261e; }
.toolroll-app.toolroll-regex-tester [data-state="success"] { color:#137333; }
.toolroll-app.toolroll-regex-tester .toolroll-regex-tester__error-detail { padding:.65rem; border-left:4px solid #b3261e; background:#fce8e6; white-space:pre-wrap; overflow-wrap:anywhere; }
@media (max-width:600px) { .toolroll-app.toolroll-regex-tester button { width:100%; } .toolroll-app.toolroll-regex-tester .toolroll-regex-tester__match-row { grid-template-columns:1fr; gap:.15rem; } }
