:root{--hl-1-bg:gold;--hl-1-fg:#5c4400;--hl-2-bg:#90ee90;--hl-2-fg:#1a4a1a;--hl-3-bg:#add8e6;--hl-3-fg:#002d45;--hl-4-bg:#ffb6c1;--hl-4-fg:#5c0018;--hl-5-bg:plum;--hl-5-fg:#3b0062;--hl-6-bg:#ffdab9;--hl-6-fg:#5c2c00;--hl-7-bg:#b0e0e6;--hl-7-fg:#002d3a;--hl-8-bg:#98fb98;--hl-8-fg:#0f3e0f;--badge-pass-bg:#2e7d32;--badge-pass-fg:#fff;--badge-fail-bg:#c62828;--badge-fail-fg:#fff;--badge-error-bg:#e65100;--badge-error-fg:#fff}[data-theme=dark]{--hl-1-bg:#7b6000;--hl-1-fg:#fff8e1;--hl-2-bg:#1a5c1a;--hl-2-fg:#f1f8f1;--hl-3-bg:#003d5c;--hl-3-fg:#e8f4f8;--hl-4-bg:#7a0020;--hl-4-fg:#fff0f3;--hl-5-bg:indigo;--hl-5-fg:#f5eeff;--hl-6-bg:#7a3b00;--hl-6-fg:#fff5ee;--hl-7-bg:#003e50;--hl-7-fg:#e0f4f8;--hl-8-bg:#145214;--hl-8-fg:#f0fff0;--badge-pass-bg:#43a047;--badge-pass-fg:#fff;--badge-fail-bg:#e53935;--badge-fail-fg:#fff;--badge-error-bg:#fb8c00;--badge-error-fg:#fff}mark[data-group="0"],mark[data-group="1"]{background:var(--hl-1-bg);color:var(--hl-1-fg)}mark[data-group="2"]{background:var(--hl-2-bg);color:var(--hl-2-fg)}mark[data-group="3"]{background:var(--hl-3-bg);color:var(--hl-3-fg)}mark[data-group="4"]{background:var(--hl-4-bg);color:var(--hl-4-fg)}mark[data-group="5"]{background:var(--hl-5-bg);color:var(--hl-5-fg)}mark[data-group="6"]{background:var(--hl-6-bg);color:var(--hl-6-fg)}mark[data-group="7"]{background:var(--hl-7-bg);color:var(--hl-7-fg)}mark[data-group="8"]{background:var(--hl-8-bg);color:var(--hl-8-fg)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}:root{--font-ui:"Inter", system-ui, -apple-system, sans-serif;--font-mono:"JetBrains Mono", "Menlo", "Consolas", "Courier New", monospace;--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sidebar-width:320px;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius:var(--radius-sm);--bg:#f0f2f5;--bg-pane:#fff;--bg-toolbar:#f7f8fa;--bg-input:#fff;--bg-hover:#f0f2f5;--bg-active:#e0e7ff;--border-color:#d1d5db;--border-focus:#6366f1;--text:#111827;--text-muted:#6b7280;--text-subtle:#9ca3af;--accent:#6366f1;--accent-hover:#4f46e5;--accent-fg:#fff;--error-color:#dc2626;--warning-bg:#fffbeb;--warning-fg:#92400e;--warning-border:#fcd34d;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #00000012, 0 2px 4px -2px #0000000d;--shadow-lg:0 10px 15px -3px #00000014, 0 4px 6px -4px #0000000d}[data-theme=dark]{--bg:#0f1117;--bg-pane:#1a1d27;--bg-toolbar:#13151f;--bg-input:#1e2130;--bg-hover:#252840;--bg-active:#2d3155;--border-color:#2e3148;--border-focus:#818cf8;--text:#e2e8f0;--text-muted:#94a3b8;--text-subtle:#475569;--accent:#818cf8;--accent-hover:#6366f1;--accent-fg:#fff;--error-color:#f87171;--warning-bg:#2d1e00;--warning-fg:#fbbf24;--warning-border:#92400e;--shadow-sm:0 1px 2px 0 #0000004d;--shadow-md:0 4px 6px -1px #0006, 0 2px 4px -2px #0000004d;--shadow-lg:0 10px 15px -3px #00000080, 0 4px 6px -4px #0000004d}html,body{height:100%;font-family:var(--font-ui);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;flex-direction:column;font-size:14px;line-height:1.5;display:flex;overflow:hidden}#app-header{padding:0 var(--sp-4);background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);height:48px;box-shadow:var(--shadow-sm);z-index:200;flex-shrink:0;justify-content:space-between;align-items:center;display:flex}.app-header-brand{align-items:center;gap:var(--sp-2);display:flex}.app-header-logo{color:var(--accent);filter:drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 50%, transparent));flex-shrink:0;font-size:20px;line-height:1}.app-header-name{letter-spacing:-.03em;color:var(--text);background:linear-gradient(90deg, var(--accent) 0%, var(--accent) 55%, var(--text) 55%);-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:17px;font-weight:800}.app-header-tagline{color:var(--text-muted);padding-left:var(--sp-2);border-left:1px solid var(--border-color);margin-left:var(--sp-1);white-space:nowrap;font-size:11px;font-weight:400}.app-header-actions{align-items:center;gap:var(--sp-2);display:flex}#app{grid-template-columns:1fr var(--sidebar-width);gap:0;height:calc(100vh - 48px);display:grid;overflow:hidden}#left-column{background:var(--bg-pane);border-right:1px solid var(--border-color);flex-direction:column;min-width:0;display:flex;overflow:hidden}#regex-pane{padding:var(--sp-2) var(--sp-3);gap:var(--sp-1);background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);box-shadow:var(--shadow-sm);flex-direction:column;flex:none;display:flex}.regex-input-row{align-items:center;gap:var(--sp-2);display:flex}#pattern-input{font-family:var(--font-mono);padding:7px var(--sp-3);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text);outline:none;flex:1;min-width:0;font-size:13px;font-weight:500;transition:border-color .15s,box-shadow .15s}#pattern-input:focus{border-color:var(--border-focus);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent)}#pattern-input.error{border-color:var(--error-color);box-shadow:0 0 0 3px color-mix(in srgb, var(--error-color) 15%, transparent)}.flag-toggles{gap:var(--sp-1);display:flex}.flag-btn{font-family:var(--font-mono);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.02em;padding:5px 9px;font-size:11px;font-weight:600;transition:background .12s,color .12s,border-color .12s}.flag-btn:hover{background:var(--bg-hover);color:var(--text)}.flag-btn.active{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.pattern-error{color:var(--error-color);font-size:11px;font-family:var(--font-mono);padding:2px var(--sp-1);min-height:17px;font-weight:500}#data-pane{flex-direction:column;flex:1;display:flex;overflow:hidden}.data-pane-toolbar{align-items:center;gap:var(--sp-2);padding:4px var(--sp-3);background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);color:var(--text-muted);flex-shrink:0;min-height:28px;font-size:11px;display:flex}.toolbar-spacer{flex:1}#match-count{color:var(--accent);font-size:11px;font-weight:600}#timing-readout{color:var(--text-subtle);font-family:var(--font-mono);font-size:10px}.toolbar-divider{background:var(--border-color);flex-shrink:0;width:1px;height:14px}.btn-toolbar{font-family:var(--font-ui);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text-muted);cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;align-items:center;gap:4px;padding:3px 9px;font-size:11px;font-weight:600;transition:background .12s,color .12s,border-color .12s;display:inline-flex}.btn-toolbar:hover{background:var(--bg-hover);color:var(--text)}.btn-toolbar input[type=file]{display:none}.btn-toolbar-danger:hover{background:color-mix(in srgb, var(--error-color) 12%, var(--bg-input));color:var(--error-color);border-color:color-mix(in srgb, var(--error-color) 40%, transparent)}#no-matches-indicator{color:var(--text-muted);font-size:11px}.perf-warning,.truncation-warning{align-items:center;gap:var(--sp-1);background:var(--warning-bg);color:var(--warning-fg);padding:5px var(--sp-3);border-bottom:1px solid var(--warning-border);flex-shrink:0;font-size:11px;font-weight:500;display:flex}.data-editor-wrap{flex:1;position:relative;overflow:hidden}.highlight-layer,#raw-input{font-family:var(--font-mono);padding:var(--sp-3) var(--sp-4);white-space:pre-wrap;word-break:break-word;font-size:13px;line-height:1.5;position:absolute;inset:0;overflow:auto}.highlight-layer{pointer-events:none;color:#0000;z-index:0;overflow:hidden}.highlight-layer mark{cursor:default;border-radius:2px;padding:0}#raw-input{color:var(--text);caret-color:var(--text);cursor:text;-webkit-user-select:text;user-select:text;z-index:1;background:0 0;border:none;outline:none}#raw-input:empty:before{content:attr(data-placeholder);color:var(--text-subtle);pointer-events:none}#dq-panel{background:var(--bg-pane);border-left:1px solid var(--border-color);flex-direction:column;display:flex;overflow:hidden}.dq-panel-header{padding:var(--sp-2) var(--sp-3);background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);letter-spacing:-.01em;box-shadow:var(--shadow-sm);flex-shrink:0;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;display:flex}#rule-count{color:var(--text-muted);background:var(--bg-hover);border:1px solid var(--border-color);border-radius:10px;padding:2px 7px;font-size:11px;font-weight:500}.dq-panel-body{flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.dq-rules-list{padding:var(--sp-2);gap:var(--sp-1);flex-direction:column;flex-shrink:0;max-height:200px;display:flex;overflow-y:auto}.dq-rule-item{border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-2);background:var(--bg-pane);box-shadow:var(--shadow-sm);flex-direction:column;gap:3px;font-size:12px;transition:box-shadow .12s;display:flex}.dq-rule-item:hover{box-shadow:var(--shadow-md)}.dq-rule-row{justify-content:space-between;align-items:center;gap:var(--sp-1);display:flex}.dq-rule-name{text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:12px;font-weight:600;overflow:hidden}.dq-rule-condition{color:var(--text-muted);font-family:var(--font-mono);font-size:10px}.badge{text-transform:uppercase;letter-spacing:.05em;border-radius:10px;flex-shrink:0;padding:2px 8px;font-size:10px;font-weight:700}.badge-pass{background:var(--badge-pass-bg);color:var(--badge-pass-fg)}.badge-fail{background:var(--badge-fail-bg);color:var(--badge-fail-fg)}.badge-error{background:var(--badge-error-bg);color:var(--badge-error-fg)}.dq-rule-actions{gap:var(--sp-1);display:flex}.btn-sm{font-family:var(--font-ui);border:1px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text);cursor:pointer;padding:3px 8px;font-size:11px;font-weight:500;transition:background .1s}.btn-sm:hover{background:var(--bg-hover)}.btn-sm.danger{color:var(--error-color);border-color:color-mix(in srgb, var(--error-color) 40%, transparent)}.add-rule-form{padding:var(--sp-2) var(--sp-2);border-top:1px solid var(--border-color);gap:var(--sp-1);background:var(--bg-toolbar);flex-direction:column;flex-shrink:0;display:flex}.add-rule-form input,.add-rule-form select{font-family:var(--font-ui);padding:5px var(--sp-2);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-input);color:var(--text);outline:none;width:100%;font-size:12px;transition:border-color .12s}.add-rule-form input:focus,.add-rule-form select:focus{border-color:var(--border-focus)}.add-rule-form .form-row{gap:var(--sp-1);display:flex}.add-rule-form .form-row input{flex:1}.btn-primary{font-family:var(--font-ui);padding:6px var(--sp-3);background:var(--accent);color:var(--accent-fg);border-radius:var(--radius-md);cursor:pointer;width:100%;box-shadow:var(--shadow-sm);border:none;font-size:12px;font-weight:600;transition:background .12s,box-shadow .12s}.btn-primary:hover{background:var(--accent-hover);box-shadow:var(--shadow-md)}#theme-toggle,#btn-export{font-family:var(--font-ui);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);padding:4px 10px;font-size:11px;font-weight:500;transition:background .12s,box-shadow .12s}#theme-toggle:hover,#btn-export:hover{background:var(--bg-hover);box-shadow:var(--shadow-md)}.header-link{font-family:var(--font-ui);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);white-space:nowrap;align-items:center;padding:4px 10px;font-size:11px;font-weight:500;text-decoration:none;transition:background .12s,box-shadow .12s;display:inline-flex}.header-link:hover{background:var(--bg-hover);box-shadow:var(--shadow-md)}#examples-panel{border-top:1px solid var(--border-color);flex-shrink:0;overflow:hidden}.examples-details{font-size:12px}.examples-summary{padding:var(--sp-2) var(--sp-2);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);-webkit-user-select:none;user-select:none;background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);justify-content:space-between;align-items:center;font-size:11px;font-weight:700;list-style:none;transition:color .1s;display:flex}.examples-summary:hover{color:var(--text)}.examples-summary::-webkit-details-marker{display:none}.examples-count{color:var(--text-subtle);background:var(--bg-hover);border:1px solid var(--border-color);border-radius:8px;padding:1px 6px;font-size:10px;font-weight:500}.examples-search-wrap{padding:var(--sp-1) var(--sp-2);background:var(--bg-toolbar);border-bottom:1px solid var(--border-color)}.examples-search{box-sizing:border-box;width:100%;font-family:var(--font-ui);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text);outline:none;padding:4px 8px;font-size:11px;transition:border-color .15s}.examples-search::placeholder{color:var(--text-subtle)}.examples-search:focus{border-color:var(--accent)}.examples-search::-webkit-search-cancel-button{display:none}.examples-body{max-height:170px;padding:var(--sp-1) 0;overflow-y:auto}.example-category{margin-bottom:2px}.example-category-label{text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);padding:var(--sp-2) var(--sp-2) 3px;border-top:1px solid var(--border-color);font-size:10px;font-weight:700}.example-entry{padding:var(--sp-1) var(--sp-2) var(--sp-2);transition:background .1s}.example-entry:hover{background:var(--bg-hover)}.example-label{color:var(--text);margin-bottom:1px;font-size:12px;font-weight:600}.example-desc{color:var(--text-muted);margin-bottom:var(--sp-1);font-size:11px;line-height:1.4}.example-actions{gap:var(--sp-1);display:flex}.btn-use-pattern,.btn-use-sample{font-family:var(--font-ui);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--text-muted);cursor:pointer;padding:3px 8px;font-size:10px;font-weight:600;transition:background .1s,color .1s,border-color .1s}.btn-use-pattern:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}.btn-use-sample:hover{background:var(--bg-hover);color:var(--text)}#regex-quick-ref{border-top:1px solid var(--border-color)}.qref-details{font-size:12px}.qref-summary{padding:var(--sp-2) var(--sp-2);cursor:pointer;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);-webkit-user-select:none;user-select:none;background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);align-items:center;font-size:11px;font-weight:700;list-style:none;transition:color .1s;display:flex}.qref-summary:hover{color:var(--text)}.qref-summary::-webkit-details-marker{display:none}.qref-summary:before{content:"▸";margin-right:var(--sp-1);font-size:10px;transition:transform .15s}.qref-details[open] .qref-summary:before{transform:rotate(90deg)}.qref-body{padding:var(--sp-1) var(--sp-2) var(--sp-2);gap:var(--sp-1);flex-direction:column;display:flex}.qref-section{flex-direction:column;gap:4px;display:flex}.qref-section-label{text-transform:uppercase;letter-spacing:.07em;color:var(--text-subtle);font-size:10px;font-weight:700}.qref-chips{flex-wrap:wrap;gap:4px;display:flex}.qref-chip{font-family:var(--font-mono);border:1.5px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-input);color:var(--accent);cursor:pointer;white-space:nowrap;padding:3px 7px;font-size:11px;font-weight:600;transition:background .1s,border-color .1s,color .1s,transform 80ms}.qref-chip:hover{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);transform:translateY(-1px)}.qref-chip:active{transform:translateY(0)}#input-stats-panel{border-top:1px solid var(--border-color);flex-shrink:0}.stats-panel{flex-direction:column;display:flex}.stats-panel-header{padding:var(--sp-2);background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);align-items:center;display:flex}.stats-panel-title{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:11px;font-weight:700}.stats-panel-body{padding:var(--sp-2) var(--sp-2) var(--sp-2);gap:var(--sp-2);flex-direction:column;display:flex}.stats-grid{gap:var(--sp-1) var(--sp-2);grid-template-columns:1fr 1fr;display:grid}.stat-item{flex-direction:column;gap:1px;display:flex}.stat-value{font-family:var(--font-mono);color:var(--text);font-size:16px;font-weight:700;line-height:1.1}.stat-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-subtle);font-size:10px;font-weight:500}.stats-match-bar-wrap{flex-direction:column;gap:4px;display:flex}.stats-match-bar-track{background:var(--border-color);border-radius:999px;height:6px;overflow:hidden}.stats-match-bar-fill{background:var(--accent);border-radius:999px;width:0%;height:100%;transition:width .3s,background-color .3s}.stats-match-bar-fill.bar-good{background:#22c55e}.stats-match-bar-fill.bar-warn{background:#f59e0b}.stats-match-bar-fill.bar-bad{background:#ef4444}.stats-match-pct{color:var(--text-subtle);font-size:10px;font-weight:500}#match-details-panel{border-top:1px solid var(--border-color);flex:1 1 0;min-height:80px;overflow-y:auto}.mdet-empty{color:var(--text-muted);padding:var(--sp-2);font-size:11px;font-family:var(--font-ui);margin:0}.mdet-error{color:var(--error-color)}.mdet-overflow{color:var(--text-subtle);padding:var(--sp-1) var(--sp-2);border-top:1px solid var(--border-color);margin:0;font-size:10px}.mdet-table{border-collapse:collapse;width:100%;font-size:11px;font-family:var(--font-mono)}.mdet-table thead th{background:var(--bg-toolbar);text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);padding:4px var(--sp-2);border-bottom:1px solid var(--border-color);text-align:left;font-size:10px;font-weight:700;position:sticky;top:0}.mdet-match-row{background:var(--bg-surface)}.mdet-match-row:nth-child(2n){background:var(--bg-input)}.mdet-group-row{background:var(--bg-toolbar)}.mdet-table td{padding:3px var(--sp-2);vertical-align:top;border-bottom:1px solid var(--border-color);color:var(--text)}.mdet-idx{color:var(--text-muted);white-space:nowrap}.mdet-val code{color:var(--accent);word-break:break-all}.mdet-pos,.mdet-len{white-space:nowrap;color:var(--text-subtle)}mark.mark-active{background:var(--accent);color:#fff;border-radius:2px}#cursor-pos{font-family:var(--font-mono);color:var(--text-subtle);-webkit-user-select:none;user-select:none;padding:0 var(--sp-1);font-size:10px}#btn-match-prev,#btn-match-next{font-family:var(--font-mono);min-width:44px;font-size:11px}#sub-pane{border-top:2px solid var(--border-color);background:var(--bg-surface);flex-direction:column;flex-shrink:0;max-height:220px;display:flex}.sub-pane-toolbar{align-items:center;gap:var(--sp-2);padding:0 var(--sp-3);background:var(--bg-toolbar);border-bottom:1px solid var(--border-color);flex-shrink:0;height:32px;display:flex}.sub-pane-label{text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);font-size:11px;font-weight:700}.sub-input-row{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-color);flex-shrink:0}#sub-input{width:100%;font-family:var(--font-mono);background:var(--bg-input);color:var(--text);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:5px var(--sp-2);box-sizing:border-box;outline:none;font-size:13px;transition:border-color .12s}#sub-input:focus{border-color:var(--accent)}.sub-output{padding:var(--sp-2) var(--sp-3);flex:1;overflow-y:auto}.sub-result{font-family:var(--font-mono);color:var(--text);white-space:pre-wrap;word-break:break-word;margin:0;font-size:12px}.sub-placeholder,.sub-error{color:var(--text-muted);font-size:11px}.sub-error{color:var(--error-color)}@media (width<=768px){html,body{height:auto;overflow:auto}#app{flex-direction:column;height:auto;display:flex;overflow:visible}#left-column,#dq-panel{border-left:none;border-right:none;border-bottom:2px solid var(--border-color);width:100%;min-width:0;overflow:visible}.app-header-tagline{display:none}.app-header-actions{gap:var(--sp-1)}#btn-export,#btn-github,#btn-issues,#theme-toggle{padding:3px 7px;font-size:10px}.data-editor-wrap{height:40vh;min-height:160px}#sub-pane{max-height:none}#dq-panel{overflow:visible}.dq-panel-body{height:auto;overflow:visible}.dq-rules-list,.examples-body{max-height:none;overflow-y:visible}#match-details-panel{flex:none;height:auto;min-height:0;overflow-y:visible}.data-pane-toolbar{height:auto;padding:var(--sp-1) var(--sp-2);gap:var(--sp-1);flex-wrap:wrap}.flag-btn{padding:4px 7px}}