.regex-card,.info-card{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:6px;margin-bottom:1rem;overflow:hidden;box-shadow:0 1px 3px #0000001a}.card-header{background-color:var(--bg-secondary);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;padding:.8rem 1rem;display:flex}.card-header h3{color:var(--text-color);margin:0;font-size:1rem}.card-actions{gap:.5rem;display:flex}.regex-input-card{margin-bottom:1rem;overflow:visible}.editor-wrapper{background-color:var(--input-bg);border-bottom:1px solid var(--border-color);align-items:center;padding:.8rem 1rem;font-family:monospace;display:flex}.regex-delimiter{color:var(--primary-color);font-size:1.1rem;font-weight:700}#regex-input{color:var(--text-color);background-color:#0000;border:none;flex:1;margin:0 .3rem;padding:.5rem;font-family:monospace;font-size:1rem}#regex-input:focus{outline:none}#regex-flags-display{color:var(--primary-color);font-size:.9rem}.regex-flags{gap:.5rem;display:flex}.regex-flags label{cursor:pointer;align-items:center;display:flex}.regex-flags input[type=checkbox]{margin-right:.2rem}.regex-flags span{color:var(--text-color);font-family:monospace;font-size:.9rem}.editor-actions{background-color:var(--bg-secondary);justify-content:flex-end;gap:.5rem;padding:.5rem 1rem;display:flex}.editor-container{padding:1rem;position:relative}#test-input{border:1px solid var(--border-color);background-color:var(--input-bg);width:100%;min-height:120px;color:var(--text-color);resize:vertical;z-index:2;border-radius:4px;padding:.8rem;font-family:monospace;font-size:.95rem;line-height:1.5;position:relative}textarea{border:1px solid var(--border-color);background-color:var(--input-bg);width:100%;min-height:120px;color:var(--text-color);resize:vertical;border-radius:4px;padding:.8rem;font-family:monospace;font-size:.95rem;line-height:1.5}textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 0 2px #3498db33}textarea::placeholder{color:var(--text-color-secondary);opacity:.7}.tools-panel{background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:6px;margin-bottom:1rem;overflow:hidden}.tool-tabs{border-bottom:1px solid var(--border-color);background-color:var(--bg-secondary);display:flex}.tab-button{border:none;border-right:1px solid var(--border-color);color:var(--text-color);cursor:pointer;background:0 0;padding:.8rem 1.2rem;font-size:.9rem}.tab-button:hover{background-color:var(--hover-bg)}.tab-button.active{background-color:var(--card-bg);border-bottom:2px solid var(--primary-color);font-weight:500}.tool-content{min-height:200px}.tool-tab-content{display:none!important}.tool-tab-content.active{padding:1rem;display:block!important}.match-info{border-bottom:1px solid var(--border-color);justify-content:space-between;margin-bottom:1rem;padding-bottom:.5rem;display:flex}.match-stats{color:var(--text-color);font-size:.9rem}.match-actions{gap:.5rem;display:flex}.match-results{border:1px solid var(--border-color);background-color:var(--input-bg);border-radius:4px;max-height:300px;padding:.5rem;overflow-y:auto}.match-item{background-color:var(--bg-secondary);border-radius:4px;margin-bottom:.5rem;padding:.5rem;font-family:monospace}.match-item:last-child{margin-bottom:0}.match-text{word-break:break-all;margin-bottom:.3rem}.match-item-header{color:var(--text-color-secondary);justify-content:space-between;margin-bottom:.3rem;font-size:.8rem;display:flex}.match-groups{border-top:1px dashed var(--border-color);margin-top:.5rem;padding-top:.5rem}.group-item{margin-bottom:.2rem;font-size:.9rem;display:flex}.group-name{color:var(--primary-color);min-width:60px}.highlight-match{background-color:#ffc1074d;border-radius:2px}.replace-header{gap:1rem;margin-bottom:1rem;display:flex}.replace-input-container{flex:1;align-items:center;display:flex}.replace-input-container label{white-space:nowrap;color:var(--text-color);margin-right:.5rem}#replace-input{border:1px solid var(--border-color);background-color:var(--input-bg);color:var(--text-color);border-radius:4px;flex:1;padding:.5rem;font-family:monospace}#replace-input:focus{border-color:var(--primary-color);outline:none}.replace-preview h4{color:var(--text-color);margin-top:0;margin-bottom:.5rem;font-size:.9rem}#replace-result{border:1px solid var(--border-color);background-color:var(--input-bg);white-space:pre-wrap;border-radius:4px;min-height:100px;max-height:300px;padding:.8rem;font-family:monospace;line-height:1.5;overflow-y:auto}.explain-panel{display:none!important}.explanation-view,.regex-visualization{flex:1}.explanation-view h4,.regex-visualization h4{color:var(--text-color);margin-top:0;margin-bottom:.5rem;font-size:.9rem}#regex-explanation,#regex-visualization{border:1px solid var(--border-color);background-color:var(--input-bg);border-radius:4px;min-height:150px;max-height:300px;margin-bottom:1rem;padding:1rem;overflow-y:auto}.explanation-item{border-bottom:1px solid var(--border-color);margin-bottom:.8rem;padding-bottom:.8rem}.explanation-item:last-child{border-bottom:none}.explanation-symbol{min-width:60px;color:var(--primary-color);background-color:var(--bg-secondary);border-radius:3px;margin-right:.5rem;padding:.2rem .4rem;font-family:monospace;font-weight:700;display:inline-block}.visualization-box{border:1px solid var(--border-color);border-radius:4px;margin:.3rem;padding:.5rem;display:inline-block;position:relative}.visualization-charclass{background-color:#3498db33;border-radius:3px;margin:0 .2rem;padding:.2rem .4rem;display:inline-block;position:relative}.visualization-component:after{content:attr(data-meaning);background:var(--card-bg);border:1px solid var(--border-color);opacity:0;pointer-events:none;white-space:nowrap;z-index:10;border-radius:4px;padding:.3rem .6rem;font-size:.8rem;transition:opacity .2s;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.visualization-component:hover:after{opacity:1}.explanation-detail{font-size:.9rem;line-height:1.4}.flag-detail{background-color:var(--bg-secondary);border-radius:3px;margin-left:.5rem;padding:.1rem .4rem;font-size:.85rem;display:inline-block}.language-tabs{border-bottom:1px solid var(--border-color);margin-bottom:1rem;display:flex}.language-tab{color:var(--text-color);cursor:pointer;background:0 0;border:none;padding:.5rem 1rem;font-size:.9rem}.language-tab:hover{background-color:var(--hover-bg)}.language-tab.active{border-bottom:2px solid var(--primary-color);font-weight:500}.code-result{position:relative}.code-output{border:1px solid var(--border-color);background-color:var(--input-bg);border-radius:4px;min-height:120px;max-height:200px;padding:.8rem;overflow-y:auto}.code-output pre{white-space:pre-wrap;margin:0;font-family:monospace}#copy-code{opacity:.7;padding:.3rem .5rem;font-size:.8rem;position:absolute;top:.5rem;right:.5rem}#copy-code:hover{opacity:1}.no-results{color:var(--text-color-secondary);text-align:center;padding:1rem;font-style:italic}.info-card{padding:1rem}.info-card h3{margin-top:0;margin-bottom:.8rem;font-size:1.1rem}.reference-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;display:grid}.reference-group h4{color:var(--text-color);margin-top:0;margin-bottom:.5rem;font-size:.95rem}.reference-table{border-collapse:collapse;width:100%}.reference-table td{color:var(--text-color-secondary);border-bottom:1px solid var(--border-color);padding:.2rem .4rem;font-size:.9rem}.reference-table td:first-child{width:25%}.reference-table tr:last-child td{border-bottom:none}.reference-table code{background-color:var(--bg-secondary);border-radius:3px;padding:.1rem .3rem;font-family:monospace;font-size:.9rem}.action-button{background-color:var(--bg-secondary);color:var(--text-color);cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;padding:.5rem 1rem;font-size:.9rem;transition:background-color .2s;display:flex}.action-button.active{background-color:var(--primary-color);color:#fff!important}.action-button svg{margin-right:.3rem}.action-button.icon-only svg{margin-right:0}.action-button:hover{background-color:var(--hover-bg)}.action-button.primary{background-color:var(--primary-color);font-weight:500;color:#fff!important}.action-button.primary:hover{background-color:var(--primary-dark,#1565c0)}.action-button.secondary{border:1px solid var(--border-color)}.dropdown{z-index:100;display:inline-block;position:relative}.dropdown-content{z-index:1001;background-color:var(--card-bg);border:1px solid var(--border-color);border-radius:4px;min-width:220px;max-height:300px;display:none;position:absolute;top:calc(100% + 4px);left:0;overflow-y:auto;box-shadow:0 2px 10px #0003}.dropdown-content.show{display:block}.templates-group{border-bottom:1px solid var(--border-color);padding:.5rem}.templates-group:last-child{border-bottom:none}.templates-group-title{color:var(--text-color);margin-bottom:.3rem;font-size:.9rem;font-weight:700}.dropdown-content a{color:var(--text-color-secondary);padding:.3rem .5rem;font-size:.9rem;text-decoration:none;transition:background-color .2s;display:block}.dropdown-content a:hover{background-color:var(--hover-bg);color:var(--text-color)}.status-message{color:#fff;z-index:1000;background-color:#333;border-radius:4px;padding:.6rem 1rem;font-size:.9rem;display:none;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.status-message.success{background-color:#2ecc71}.status-message.error{background-color:#e74c3c}@media (width<=768px){.tool-tabs{flex-wrap:wrap}.tab-button{flex-basis:50%}.replace-header{flex-direction:column}.reference-grid{grid-template-columns:1fr}.regex-flags label span{font-size:.8rem}}.test-input-card .editor-container{padding:1rem;position:relative;overflow:hidden}#test-input{z-index:1;color:var(--text-color);background-color:#0000;position:relative}.highlight-wrapper pre{white-space:pre-wrap;word-break:break-word;margin:0}.highlight-match{background-color:#ffc1074d;border-radius:2px;margin:0;padding:0}[data-theme=dark] #test-input{color:var(--text-color);background-color:#0000}.highlight-wrapper{display:none!important}.no-results.empty-regex{color:var(--text-color-secondary);text-align:center;background-color:#00000008;border-radius:4px;padding:2rem;font-style:italic}.test-input-card .cm-test-text-editor .CodeMirror{border:1px solid var(--border-color);border-radius:4px;height:11rem;max-height:11rem;font-family:monospace;font-size:.95rem;line-height:1.5}.test-input-card .cm-test-text-editor .CodeMirror-scroll{min-height:0;max-height:11rem;overflow:auto!important}[data-theme=dark] .test-input-card .cm-test-text-editor .CodeMirror{background-color:var(--input-bg);color:var(--text-color)}.cm-matchhighlight{background-color:#ffc10766;border-radius:2px;box-shadow:0 0 0 1px #ffa00033}.cm-current-match{background-color:#ffa00099;border:1px solid #f39c12;border-radius:2px}.explain-panel.active{flex-direction:column;gap:1rem;display:flex!important}.regex-flow{margin-bottom:1rem;padding:1rem}.regex-overview{text-align:center;margin-bottom:1rem}.regex-overview h4{color:var(--text-color);margin:0 0 .5rem;font-size:1rem}.pattern-original{background-color:var(--bg-secondary);border-radius:4px;margin:0 auto;padding:.5rem;display:inline-block}.pattern-original code{font-family:monospace;font-size:.95rem}.regex-components{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin:1rem 0;display:flex}.component-item{border:1px solid var(--border-color);background-color:var(--bg-secondary);text-align:center;border-radius:4px;min-width:80px;max-width:220px;padding:.5rem}.component-symbol{border-radius:3px;margin-bottom:.3rem;padding:.2rem;font-family:monospace;font-weight:700}.component-explanation{color:var(--text-color-secondary);font-size:.8rem}.component-arrow{color:var(--text-color-secondary);font-size:1.2rem}.char-class .component-symbol{color:#3498db;background-color:#3498db33}.group .component-symbol{color:#9b59b6;background-color:#9b59b633}.quantifier .component-symbol{color:#e74c3c;background-color:#e74c3c33}.escape-char .component-symbol{color:#27ae60;background-color:#2ecc7133}.literal-seq .component-symbol,.literal-char .component-symbol{color:#5d6d7e;background-color:#95a5a638}.special-char .component-symbol{color:#f39c12;background-color:#f1c40f33}.alternation .component-symbol{color:#d35400;background-color:#e67e2233}[data-theme=dark] .char-class .component-symbol{color:#5dade2}[data-theme=dark] .group .component-symbol{color:#bb8fce}[data-theme=dark] .quantifier .component-symbol{color:#f1948a}[data-theme=dark] .escape-char .component-symbol{color:#7dcea0}[data-theme=dark] .special-char .component-symbol{color:#f7dc6f}[data-theme=dark] .alternation .component-symbol{color:#e59866}.regex-input-field[data-v-002de68a]{color:var(--text-color);background-color:#0000;border:none;flex:1;margin:0 .3rem;padding:.5rem;font-family:monospace;font-size:1rem}.regex-input-field.invalid[data-v-002de68a]{outline:2px solid var(--danger-color,#e74c3c);border-radius:2px}.replace-preview-text[data-v-002de68a]{white-space:pre-wrap;word-break:break-word;font-family:monospace;font-size:.9rem}