.regex-tester{max-width:800px;margin:0 auto;padding:var(--space-xl);background:var(--color-bg-card);border-radius:var(--radius-xl);border:1px solid var(--color-border-subtle);display:flex;flex-direction:column;gap:var(--space-lg)}.regex-input-row{display:flex;align-items:center;gap:var(--space-xs);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-sm) var(--space-md);transition:border-color .2s ease}.regex-input-row:focus-within{border-color:var(--color-accent)}.regex-delimiter{font-family:var(--font-mono);font-size:var(--text-xl);color:var(--color-accent);user-select:none;line-height:1}.regex-pattern-input{flex:1;background:transparent;border:none;outline:none;font-family:var(--font-mono);font-size:var(--text-lg);color:var(--color-text-primary);min-width:0}.regex-pattern-input::placeholder{color:var(--color-text-muted);opacity:.6}.regex-pattern-input.regex-invalid{color:#ef4444}.regex-flags-display{font-family:var(--font-mono);font-size:var(--text-lg);color:var(--color-accent-light);min-width:2ch;user-select:none}.regex-copy-btn{padding:var(--space-xs);background:var(--color-accent);border:none;border-radius:var(--radius-sm);color:#fff;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.regex-copy-btn:hover:not(:disabled){background:var(--color-accent-light);transform:scale(1.05)}.regex-copy-btn:disabled{opacity:.4;cursor:not-allowed}.regex-copy-btn svg{width:18px;height:18px}.regex-error{color:#ef4444;font-size:var(--text-sm);margin-top:calc(-1 * var(--space-sm))}.regex-flags{display:flex;flex-wrap:wrap;gap:var(--space-sm)}.regex-flag-btn{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:var(--color-bg-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--text-sm);cursor:pointer;transition:all .2s ease;user-select:none}.regex-flag-btn:hover{border-color:var(--color-accent);color:var(--color-text-secondary)}.regex-flag-btn.active{background:#6366f126;border-color:var(--color-accent);color:var(--color-accent-light)}.flag-key{font-family:var(--font-mono);font-weight:700;font-size:var(--text-base)}.flag-label{font-size:var(--text-xs)}.regex-test-area{display:flex;flex-direction:column;gap:var(--space-sm)}.regex-label{font-size:var(--text-sm);color:var(--color-text-muted);font-weight:500}.regex-label strong{color:var(--color-accent-light)}.regex-test-wrapper{position:relative;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-primary);transition:border-color .2s ease}.regex-test-wrapper:focus-within{border-color:var(--color-accent)}.regex-highlight-layer,.regex-test-input{font-family:var(--font-mono);font-size:var(--text-base);line-height:1.6;padding:var(--space-md);white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word}.regex-highlight-layer{position:absolute;inset:0;pointer-events:none;color:transparent;overflow:hidden}.regex-test-input{position:relative;width:100%;min-height:150px;background:transparent;border:none;outline:none;color:var(--color-text-primary);resize:vertical;caret-color:var(--color-text-primary)}.regex-test-input::placeholder{color:var(--color-text-muted);opacity:.6}.regex-match{background:#6366f14d;border-radius:2px;color:transparent;box-shadow:0 0 0 1px #6366f180}.regex-results{display:flex;flex-direction:column;gap:var(--space-md)}.regex-results-header{display:flex;align-items:center;justify-content:space-between}.regex-cheatsheet-toggle{display:flex;align-items:center;gap:var(--space-xs);background:none;border:none;color:var(--color-accent);font-size:var(--text-sm);cursor:pointer;padding:var(--space-xs) 0;transition:opacity .2s ease}.regex-cheatsheet-toggle:hover{opacity:.8}.regex-match-list{display:flex;flex-direction:column;gap:var(--space-sm);max-height:300px;overflow-y:auto}.regex-match-item{padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border-radius:var(--radius-sm);border:1px solid var(--color-border-subtle)}.regex-match-header{display:flex;align-items:center;gap:var(--space-sm)}.regex-match-index{font-size:var(--text-xs);font-weight:700;color:var(--color-accent);min-width:2rem}.regex-match-value{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-text-primary);background:#6366f11a;padding:2px var(--space-xs);border-radius:3px;word-break:break-all}.regex-match-position{margin-left:auto;font-size:var(--text-xs);color:var(--color-text-muted);flex-shrink:0}.regex-groups{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-xs);padding-top:var(--space-xs);border-top:1px solid var(--color-border-subtle)}.regex-group-item{display:flex;align-items:center;gap:4px;font-size:var(--text-xs)}.regex-group-label{color:var(--color-text-muted)}.regex-group-item code{font-family:var(--font-mono);color:var(--color-accent-light);background:#6366f11a;padding:1px 4px;border-radius:2px}.regex-no-matches{text-align:center;color:var(--color-text-muted);font-size:var(--text-sm);padding:var(--space-md)}.regex-cheatsheet{padding-top:var(--space-lg);border-top:1px solid var(--color-border-subtle)}.regex-cheatsheet h3{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-md);color:var(--color-text-secondary)}.regex-cheatsheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-xs)}.regex-cheatsheet-item{display:flex;align-items:baseline;gap:var(--space-sm);padding:var(--space-xs) var(--space-sm);border-radius:var(--radius-sm);transition:background .15s ease}.regex-cheatsheet-item:hover{background:var(--color-bg-primary)}.regex-cheatsheet-token{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent-light);background:#6366f11a;padding:1px 6px;border-radius:3px;min-width:5ch;text-align:center;flex-shrink:0}.regex-cheatsheet-desc{font-size:var(--text-xs);color:var(--color-text-muted)}.regex-explanation{padding:var(--space-md) var(--space-lg);background:linear-gradient(135deg,#6366f114,#6366f108);border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-md);animation:regex-fade-in .25s ease}@keyframes regex-fade-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.regex-explanation-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xs)}.regex-explanation-header h3{font-size:var(--text-base);font-weight:600;color:var(--color-accent-light)}.regex-explanation-close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);transition:color .2s ease;display:flex;align-items:center}.regex-explanation-close:hover{color:var(--color-text-primary)}.regex-explanation-desc{font-size:var(--text-sm);color:var(--color-text-muted);margin-bottom:var(--space-md)}.regex-explanation-body{margin-bottom:var(--space-md)}.regex-explanation-label{display:block;font-size:var(--text-xs);font-weight:600;color:var(--color-accent);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-xs)}.regex-explanation-body p{font-size:var(--text-sm);color:var(--color-text-secondary);line-height:1.7}.regex-explanation-pattern{padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border-radius:var(--radius-sm);display:inline-block}.regex-explanation-pattern code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--color-accent-light)}.regex-examples-trigger-row{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap}.regex-examples-trigger{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) var(--space-md);background:linear-gradient(135deg,#6366f11f,#6366f10f);border:1px solid rgba(99,102,241,.25);border-radius:var(--radius-md);color:var(--color-accent-light);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all .2s ease;user-select:none}.regex-examples-trigger:hover{background:linear-gradient(135deg,#6366f133,#6366f11a);border-color:var(--color-accent);transform:translateY(-1px)}.regex-examples-trigger-count{font-size:var(--text-xs);background:#6366f133;color:var(--color-accent);padding:1px 7px;border-radius:10px;font-weight:600}.regex-active-example-badge{display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-xs) var(--space-sm);background:#6366f11a;border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-sm);font-size:var(--text-xs);color:var(--color-accent-light);font-weight:500;animation:regex-fade-in .2s ease}.regex-badge-dismiss{display:flex;align-items:center;background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:2px;border-radius:3px;transition:color .15s ease}.regex-badge-dismiss:hover{color:var(--color-text-primary)}.regex-examples-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1000;background:#000000a6;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:var(--space-lg);animation:regex-overlay-in .2s ease}@keyframes regex-overlay-in{0%{opacity:0}to{opacity:1}}@keyframes regex-overlay-out{0%{opacity:1}to{opacity:0}}.regex-examples-overlay.closing{animation:regex-overlay-out .2s ease forwards}.regex-examples-overlay.closing .regex-examples-modal{animation:regex-modal-out .2s ease forwards}.regex-examples-modal{width:100%;max-width:780px;max-height:min(80vh,700px);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;box-shadow:0 0 0 1px #ffffff0d,0 24px 48px #0006,0 8px 16px #0003;animation:regex-modal-in .25s ease}@keyframes regex-modal-in{0%{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes regex-modal-out{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(12px) scale(.97)}}.regex-examples-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-border-subtle);flex-shrink:0}.regex-examples-modal-header h3{font-size:var(--text-lg);font-weight:600;color:var(--color-text-primary)}.regex-examples-modal-close{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:var(--space-xs);border-radius:var(--radius-sm);display:flex;align-items:center;transition:color .15s ease}.regex-examples-modal-close:hover{color:var(--color-text-primary)}.regex-examples-search{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-bottom:1px solid var(--color-border-subtle);flex-shrink:0;color:var(--color-text-muted)}.regex-examples-search-input{flex:1;background:none;border:none;outline:none;color:var(--color-text-primary);font-size:var(--text-base);font-family:inherit}.regex-examples-search-input::placeholder{color:var(--color-text-muted);opacity:.6}.regex-examples-search-clear{background:none;border:none;color:var(--color-text-muted);cursor:pointer;padding:4px;border-radius:3px;display:flex;align-items:center;transition:color .15s ease}.regex-examples-search-clear:hover{color:var(--color-text-primary)}.regex-category-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:var(--space-sm) var(--space-lg);border-bottom:1px solid var(--color-border-subtle);flex-shrink:0}.regex-category-tab{display:flex;align-items:center;gap:4px;padding:4px var(--space-sm);background:none;border:1px solid transparent;border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--text-xs);cursor:pointer;transition:all .15s ease;user-select:none;white-space:nowrap;flex-shrink:0}.regex-category-tab:hover{color:var(--color-text-secondary);background:#ffffff0a}.regex-category-tab.active{background:#6366f126;border-color:#6366f14d;color:var(--color-accent-light);font-weight:500}.regex-category-count{font-size:10px;background:#6366f11f;color:var(--color-accent);padding:0 5px;border-radius:8px;font-weight:600;min-width:1.2em;text-align:center;line-height:1.6}.regex-category-tab.active .regex-category-count{background:#6366f14d}.regex-examples-results-info{padding:var(--space-xs) var(--space-lg);font-size:var(--text-xs);color:var(--color-text-muted);flex-shrink:0}.regex-examples-scroll{overflow-y:auto;padding:var(--space-sm) var(--space-lg) var(--space-lg);flex:1;min-height:0}.regex-examples-category-section{margin-bottom:var(--space-lg)}.regex-examples-category-section:last-child{margin-bottom:0}.regex-examples-category-title{font-size:var(--text-sm);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--space-sm);padding-bottom:var(--space-xs);border-bottom:1px solid var(--color-border-subtle)}.regex-examples-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:var(--space-sm)}.regex-example-card{display:flex;flex-direction:column;gap:4px;padding:var(--space-sm) var(--space-md);background:var(--color-bg-primary);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:all .15s ease}.regex-example-card:hover{border-color:var(--color-accent);box-shadow:0 2px 12px #6366f11a}.regex-example-card.active{border-color:var(--color-accent);background:#6366f114;box-shadow:0 0 0 1px var(--color-accent)}.regex-example-name{font-size:var(--text-sm);font-weight:600;color:var(--color-text-primary);line-height:1.3}.regex-example-pattern{font-family:var(--font-mono);font-size:11px;color:var(--color-accent-light);background:#6366f11a;padding:2px 6px;border-radius:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.regex-example-desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:600px){.regex-tester{padding:var(--space-lg)}.regex-input-row{flex-wrap:wrap}.regex-pattern-input{font-size:16px}.regex-flags{gap:var(--space-xs)}.regex-flag-btn{padding:var(--space-xs);min-height:36px}.flag-label{display:none}.regex-cheatsheet-grid{grid-template-columns:1fr}.regex-match-header{flex-wrap:wrap}.regex-match-position{margin-left:0;width:100%}.regex-explanation{padding:var(--space-sm) var(--space-md)}.regex-examples-overlay{padding:var(--space-sm);align-items:flex-end}.regex-examples-modal{max-height:90vh;border-radius:var(--radius-md);border-bottom-left-radius:0;border-bottom-right-radius:0}.regex-examples-modal-header,.regex-examples-search,.regex-examples-results-info,.regex-examples-scroll{padding-left:var(--space-md);padding-right:var(--space-md)}.regex-category-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-left:var(--space-md);padding-right:var(--space-md)}.regex-category-tabs::-webkit-scrollbar{display:none}.regex-examples-grid{grid-template-columns:1fr}.regex-examples-trigger{font-size:var(--text-xs);padding:var(--space-xs) var(--space-sm)}.regex-test-input{min-height:120px;font-size:16px}.regex-highlight-layer{font-size:16px}.regex-copy-btn{min-width:36px;min-height:36px}}@media(max-width:400px){.regex-tester{padding:var(--space-md)}.regex-input-row{padding:var(--space-xs) var(--space-sm)}.regex-examples-modal{max-height:95vh}}