:root,[data-theme=dark]{--bg-primary: #1b1c20;--bg-secondary: #222328;--bg-tertiary: #2a2c32;--bg-panel: #24252a;--bg-editor: #1b1c20;--text-primary: #e0e0e4;--text-secondary: #a0a0b0;--text-muted: #6c6c78;--accent: #FDA500;--accent-dim: #cc8500;--accent-glow: rgba(253, 165, 0, .15);--action: #3FABCC;--action-hover: #3F8BA3;--success: #4ecca3;--warning: #f0c040;--error: #e05050;--border: #303138;--border-focus: #4a4b54;--match-bg-0: rgba(255, 210, 80, .25);--match-bg-1: rgba(80, 200, 255, .25);--match-bg-2: rgba(160, 240, 120, .25);--match-bg-3: rgba(255, 130, 200, .25);--match-border-0: rgba(255, 210, 80, .6);--match-border-1: rgba(80, 200, 255, .6);--match-border-2: rgba(160, 240, 120, .6);--match-border-3: rgba(255, 130, 200, .6);--font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--radius: 6px;--radius-lg: 10px}[data-theme=light]{--bg-primary: #f5f5f7;--bg-secondary: #eaeaee;--bg-tertiary: #dddde3;--bg-panel: #ededf1;--bg-editor: #f5f5f7;--text-primary: #1a1a1e;--text-secondary: #55555e;--text-muted: #888892;--accent: #c98200;--accent-dim: #a06800;--accent-glow: rgba(201, 130, 0, .12);--action: #2d8aa8;--action-hover: #246f88;--success: #1a9a6e;--warning: #b89020;--error: #c04040;--border: #d0d0d8;--border-focus: #b0b0bc;--match-bg-0: rgba(255, 190, 50, .22);--match-bg-1: rgba(50, 170, 230, .22);--match-bg-2: rgba(80, 190, 60, .22);--match-bg-3: rgba(220, 90, 170, .22);--match-border-0: rgba(200, 150, 30, .6);--match-border-1: rgba(40, 140, 200, .6);--match-border-2: rgba(60, 160, 40, .6);--match-border-3: rgba(190, 70, 140, .6)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--bg-primary);color:var(--text-primary);font-family:var(--font-sans);font-size:21px;line-height:1.5;overflow:hidden}#app{display:flex;flex-direction:column;height:100vh}#app-header{display:flex;align-items:center;gap:20px;padding:14px 28px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0}#app-header h1{font-size:26px;font-weight:700;color:var(--accent);letter-spacing:-.5px}#app-header .subtitle{font-size:16px;color:var(--text-muted)}#app-header .subtitle code{color:var(--text-secondary);font-family:var(--font-mono);background:var(--bg-tertiary);padding:2px 6px;border-radius:3px;font-size:15px}#runtime-status{font-size:16px;padding:5px 14px;border-radius:var(--radius);white-space:nowrap}.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.header-btn{display:flex;align-items:center;gap:6px;background:transparent;color:var(--text-muted);border:none;padding:6px 10px;border-radius:var(--radius);cursor:pointer;transition:color .15s,background .15s}.header-btn:hover{color:var(--action);background:var(--bg-tertiary)}.header-btn.copied{color:var(--success)}.header-btn .icon{display:flex;align-items:center}.status-loading{color:var(--warning);background:#f0c0401a}.status-ready{color:var(--success);background:#4ecca31a}.status-error{color:var(--error);background:#e050501a}#app-main{display:grid;grid-template-columns:1fr 440px;grid-template-rows:auto auto 1fr auto;gap:0;flex:1;overflow:hidden}.controls-bar{grid-column:1 / -1;display:flex;align-items:center;gap:16px;padding:10px 28px;background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-wrap:wrap}.controls-bar label{display:flex;align-items:center;gap:6px;font-size:16px;color:var(--text-secondary);cursor:pointer;user-select:none}.controls-bar label:hover{color:var(--text-primary)}.controls-bar input[type=checkbox]{accent-color:var(--action)}.controls-bar select,.controls-bar input[type=number]{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);padding:5px 10px;font-size:16px;font-family:var(--font-mono)}.controls-bar select:focus,.controls-bar input:focus{outline:none;border-color:var(--action)}.controls-separator{width:1px;height:28px;background:var(--border)}.pattern-area{grid-column:1 / -1;border-bottom:1px solid var(--border)}.pattern-area .area-label{display:flex;align-items:center;gap:10px;padding:8px 28px 0;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.pattern-area .cm-editor{font-size:22px}.replacement-area{grid-column:1 / -1;border-bottom:1px solid var(--border);display:none}.replacement-area.visible{display:block}.replacement-area .area-label{padding:8px 28px 0;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.replacement-area input{display:block;width:100%;background:var(--bg-editor);color:var(--text-primary);border:none;padding:10px 28px;font-size:22px;font-family:var(--font-mono)}.replacement-area input:focus{outline:none;background:var(--bg-panel)}.text-area{grid-column:1;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}.text-area .area-label{padding:8px 28px;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);flex-shrink:0}.text-editor-container{flex:1;overflow:hidden}.output-area{border-top:1px solid var(--border);display:none}.output-area.visible{display:flex;flex-direction:column;max-height:280px}.output-area .area-label{padding:8px 28px;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);border-bottom:1px solid var(--border);flex-shrink:0}.output-editor-container{flex:1;overflow:auto}.sidebar{grid-column:2;display:flex;flex-direction:column;overflow:hidden}.results-panel,.explanation-panel{overflow:auto;padding:16px 20px}.results-panel{flex:1;border-bottom:1px solid var(--border)}.explanation-panel{flex:1}.panel-title{font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);margin-bottom:10px}.stats-bar{grid-column:1 / -1;display:flex;align-items:center;gap:20px;padding:6px 28px;background:var(--bg-secondary);border-top:1px solid var(--border);font-size:15px;color:var(--text-muted);flex-shrink:0}.stats-bar .stat-value{color:var(--text-secondary);font-family:var(--font-mono)}.stats-bar .stats-right{margin-left:auto;display:flex;align-items:center;gap:16px}.stats-bar label{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--text-muted);cursor:pointer}.stats-bar label .icon{display:flex;align-items:center;color:var(--text-muted)}.stats-bar input[type=number]{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius);padding:3px 8px;font-size:15px;font-family:var(--font-mono);width:56px}.stats-bar input[type=number]:focus{outline:none;border-color:var(--action)}.theme-toggle{display:flex;align-items:center;background:transparent;color:var(--text-muted);border:none;padding:6px;border-radius:var(--radius);cursor:pointer;transition:color .15s,background .15s}.theme-toggle:hover{color:var(--accent);background:var(--bg-tertiary)}.stats-link{display:flex;align-items:center;color:var(--text-muted);padding:6px;border-radius:var(--radius);transition:color .15s,background .15s}.stats-link:hover{color:var(--accent);background:var(--bg-tertiary)}.cm-editor{height:100%;background:var(--bg-editor);font-family:var(--font-mono)}.cm-editor .cm-content{padding:10px 16px;caret-color:var(--action)}.cm-editor .cm-gutters{background:var(--bg-secondary);border-right:1px solid var(--border);color:var(--text-muted)}.cm-editor .cm-activeLine{background:#ffffff08}.cm-editor .cm-selectionBackground,.cm-editor .cm-content ::selection{background:#3fabcc33!important}.cm-editor .cm-cursor{border-left-color:var(--action)}.cm-editor.cm-focused{outline:none}.match-highlight-0{background:var(--match-bg-0);border-bottom:2px solid var(--match-border-0)}.match-highlight-1{background:var(--match-bg-1);border-bottom:2px solid var(--match-border-1)}.match-highlight-2{background:var(--match-bg-2);border-bottom:2px solid var(--match-border-2)}.match-highlight-3{background:var(--match-bg-3);border-bottom:2px solid var(--match-border-3)}.error-message{color:var(--error);font-family:var(--font-mono);font-size:18px;white-space:pre-wrap;word-break:break-word;padding:10px;background:#e0505014;border-radius:var(--radius);border-left:3px solid var(--error)}.error-message .error-pos{display:block;margin-top:6px;font-size:15px;color:var(--text-muted)}.match-card{margin-bottom:10px;padding:10px 14px;background:var(--bg-tertiary);border-radius:var(--radius);border-left:3px solid transparent}.match-card:nth-child(4n+1){border-left-color:var(--match-border-0)}.match-card:nth-child(4n+2){border-left-color:var(--match-border-1)}.match-card:nth-child(4n+3){border-left-color:var(--match-border-2)}.match-card:nth-child(4n){border-left-color:var(--match-border-3)}.match-header{display:flex;justify-content:space-between;font-size:16px;margin-bottom:5px}.match-index{font-weight:600;color:var(--text-secondary)}.match-span{color:var(--text-muted);font-family:var(--font-mono);font-size:14px}.match-full{font-family:var(--font-mono);font-size:18px;color:var(--text-primary);background:#0003;padding:5px 8px;border-radius:4px;word-break:break-all;margin-bottom:5px}.match-groups{font-size:14px;color:var(--text-secondary)}.match-groups .group-entry{display:flex;gap:8px;padding:2px 0}.match-groups .group-name{color:var(--text-muted);font-family:var(--font-mono);min-width:90px}.match-groups .group-value{font-family:var(--font-mono);color:var(--text-primary)}.no-matches{color:var(--text-muted);font-style:italic;font-size:18px;padding:28px 0;text-align:center}.list-result{font-family:var(--font-mono);font-size:18px}.list-result .list-item{padding:4px 10px;background:var(--bg-tertiary);border-radius:4px;margin-bottom:4px;word-break:break-all}.list-result .list-item:nth-child(2n){background:var(--bg-tertiary)}.explanation-tree{font-size:16px;font-family:var(--font-mono)}.explanation-node{padding:3px 0 3px 20px;border-left:1px solid var(--border)}.explanation-node .node-desc{color:var(--text-secondary)}.explanation-node .node-type{color:var(--accent);font-weight:600;margin-right:8px}.explanation-node .node-detail{color:var(--text-muted);font-size:14px}@media(max-width:1350px){#app-main{grid-template-columns:1fr;grid-template-rows:auto auto 1fr auto auto}.text-area{border-right:none}.sidebar{grid-column:1;border-top:1px solid var(--border);max-height:300px}}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-focus)}