.regex-input-row{display:flex;align-items:center;gap:0}
.regex-slash{font-size:20px;color:#3592e2;font-weight:700;padding:0 4px}
.regex-input-row input[type="text"]{flex:1;padding:8px 10px;border:1px solid #ddd;border-radius:3px;font-size:14px;font-family:monospace}
.regex-input-row input:focus{outline:none;border-color:#3592e2}
.flags-input{max-width:80px;text-align:center}
.flag-toggles{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.flag-toggle{display:flex;align-items:center;gap:4px;font-size:13px;cursor:pointer;padding:4px 10px;border:1px solid #ddd;border-radius:3px;transition:all .2s}
.flag-toggle.active{background:#3592e2;color:#fff;border-color:#3592e2}
.flag-toggle:hover{border-color:#3592e2}
.template-list{display:flex;gap:6px;flex-wrap:wrap}
.template-btn{font-size:11px;padding:4px 10px;border:1px solid #ddd;border-radius:3px;cursor:pointer;background:#fff;color:#555;transition:all .2s}
.template-btn:hover{border-color:#3592e2;color:#3592e2}
.match-highlight{font-family:monospace;font-size:13px;line-height:2;padding:15px;background:#f5f5f5;border:1px solid #e8e8e8;border-radius:3px;white-space:pre-wrap;word-break:break-all;min-height:60px}
.match-highlight mark{background:#fff3cd;padding:1px 2px;border-radius:2px}
.match-highlight .group1{background:#c8e6c9}
.match-highlight .group2{background:#bbdefb}
.match-highlight .group3{background:#f8bbd0}
.match-count{font-size:13px;color:#888;margin-top:8px}
.match-details{margin-top:10px}
.match-item{font-size:12px;padding:6px 10px;background:#f9f9f9;border-radius:3px;margin-bottom:4px;font-family:monospace}
.match-item .match-text{color:#3592e2;font-weight:700}
.match-item .match-index{color:#888}