.regex-pattern-row{display:flex;gap:var(--space-md);align-items:flex-end;flex-wrap:wrap}.regex-pattern-field{flex:1;min-width:200px}.regex-flags-field,.regex-mode-field{flex-shrink:0}.regex-flags{display:flex;gap:var(--space-xs);margin-top:var(--space-xs)}.regex-flag-label{display:flex;align-items:center;cursor:pointer}.regex-flag-label input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.regex-flag-badge{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:var(--radius-sm);border:1.5px solid var(--color-border);font-family:var(--font-mono);font-size:.875rem;font-weight:600;color:var(--color-text-muted);background:var(--color-bg);transition:all .15s ease;user-select:none}.regex-flag-label input[type=checkbox]:checked+.regex-flag-badge{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.regex-flag-label:hover .regex-flag-badge{border-color:var(--color-primary);color:var(--color-primary)}.regex-flag-label input[type=checkbox]:checked:hover+.regex-flag-badge{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}.regex-replace-row{display:flex;flex-direction:column;gap:var(--space-xs)}.regex-preview{min-height:3rem;padding:var(--space-sm) var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:.9rem;line-height:1.6;white-space:pre-wrap;word-break:break-word;color:var(--color-text);margin-top:var(--space-xs)}.regex-preview mark{background:gold;color:var(--color-text);border-radius:2px;padding:0 1px}.regex-match-list{display:flex;flex-direction:column;gap:var(--space-xs)}.regex-match-header{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;padding:var(--space-xs) 0;margin-top:var(--space-sm)}.regex-match-header:first-child{margin-top:0}.regex-match-num{font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--color-primary);background:color-mix(in srgb,var(--color-primary) 12%,transparent);padding:1px 6px;border-radius:var(--radius-sm)}.regex-match-meta{margin-left:auto}.regex-groups{margin-left:var(--space-lg);display:flex;flex-direction:column;gap:2px}.regex-group-row .copy-row-text{display:flex;align-items:center;gap:var(--space-sm)}.regex-group-label{font-size:.7rem;font-weight:700;text-transform:uppercase;color:var(--color-text-muted);white-space:nowrap;flex-shrink:0;min-width:80px}.regex-group-val{font-family:var(--font-mono);font-size:.85rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.regex-quickref{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}.regex-quickref-toggle{padding:var(--space-sm) var(--space-md);font-size:.875rem;font-weight:600;color:var(--color-text-muted);cursor:pointer;background:var(--color-surface);list-style:none;user-select:none;display:flex;align-items:center;gap:var(--space-sm)}.regex-quickref-toggle::-webkit-details-marker{display:none}.regex-quickref-toggle:before{content:"▶";font-size:.65rem;transition:transform .15s}.regex-quickref[open] .regex-quickref-toggle:before{transform:rotate(90deg)}.regex-quickref-toggle:hover{color:var(--color-text);background:var(--color-surface-hover)}.regex-quickref-content{padding:var(--space-md);background:var(--color-bg);border-top:1px solid var(--color-border)}.regex-quickref-table{width:100%;border-collapse:collapse;font-size:.8rem}.regex-quickref-table th{text-align:left;padding:var(--space-xs) var(--space-sm);font-weight:700;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:.7rem;border-bottom:1px solid var(--color-border)}.regex-quickref-table td{padding:var(--space-xs) var(--space-sm);border-bottom:1px solid var(--color-border);vertical-align:middle}.regex-quickref-table tr:last-child td{border-bottom:none}.regex-quickref-table td:first-child{white-space:nowrap;width:130px}.regex-quickref-table code{font-family:var(--font-mono);font-size:.85em;color:var(--color-primary);background:var(--color-primary-subtle);padding:1px 4px;border-radius:var(--radius-sm)}:global([dir=rtl]) .regex-match-meta{margin-left:0;margin-right:auto}:global([dir=rtl]) .regex-groups{margin-left:0;margin-right:var(--space-lg)}:global([dir=rtl]) .regex-quickref-table th{text-align:right}@media(max-width:768px){.regex-pattern-row{flex-direction:column;align-items:stretch}}