.regex-container{min-height:200px;position:relative}.regex-textarea{resize:vertical;min-height:150px;font-family:Courier New,Consolas,Liberation Mono,monospace}.regex-preview{white-space:pre-wrap;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem;min-height:200px;max-height:400px;padding:1rem;font-family:Courier New,Consolas,Liberation Mono,monospace;line-height:1.6;overflow:auto}.regex-match{background-color:#fef3c7;border:1px solid #f59e0b;border-radius:.25rem;margin:0 .1rem;padding:.1rem .2rem}.regex-error{background-color:#fee2e2;border-left:4px solid #ef4444;margin-top:1rem;padding:.75rem}.regex-group{background-color:#dbeafe;border:1px solid #3b82f6;border-radius:.25rem;margin:0 .1rem;padding:.1rem .2rem}.regex-flags button.active{color:#fff;background-color:#3b82f6}.regex-quick-ref-item{cursor:pointer;border-radius:.375rem;padding:.5rem;transition:all .2s}.regex-quick-ref-item:hover{background-color:#f3f4f6}.regex-quick-ref-item code{background-color:#f1f5f9;border-radius:.25rem;padding:.125rem .375rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.875rem}.regex-pattern-card{cursor:pointer;border:1px solid #e5e7eb;border-radius:.5rem;padding:1rem;transition:all .2s}.regex-pattern-card:hover{border-color:#3b82f6;transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000001a}.regex-pattern-card h4{color:#1f2937;margin-bottom:.25rem;font-weight:600}.regex-pattern-card p{color:#6b7280;margin-bottom:.5rem;font-size:.875rem}.regex-pattern-card code{color:#374151;background-color:#f3f4f6;border-radius:.375rem;padding:.25rem .5rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.875rem}.regex-stats{color:#6b7280;gap:1rem;font-size:.875rem;display:flex}.regex-stats span{background-color:#f3f4f6;border-radius:9999px;padding:.25rem .75rem}.tool-card{background:#fff;border:1px solid #e5e7eb;box-shadow:0 1px 3px #0000001a}.gradient-bg{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}