:root{--bg-primary:#1f1f1f;--bg-secondary:#181818;--bg-navbar:#181818;--bg-tertiary:#242424;--bg-input:#1f1f1f;--bg-hover:#2a2a2a;--border-color:#2c2c2c;--border-focus:#3b82f6;--text-primary:#fff;--text-secondary:#b4b4b4;--text-muted:#8f8f91;--accent-cyan:#06b6d4;--accent-purple:#8b5cf6;--accent-green:#129b6d;--accent-red:#ef4444;--accent-yellow:#f59e0b;--accent-pink:#ec4899;--accent-blue:#336dca;--accent-orange:#f97316;--match-color-1:#3b82f6;--match-color-2:#8b5cf6;--match-color-3:#10b981;--match-color-4:#f59e0b;--match-color-5:#ec4899;--match-color-6:#06b6d4;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--font-mono:"monospace", "Fira Code", "Cascadia Code", monospace;--font-ui:"Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;--shadow-sm:0 2px 4px #00000040;--shadow-md:0 4px 12px #00000059;--shadow-lg:0 8px 24px #00000073;--transition:.15s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{font-size:17.6px}body{font-family:var(--font-ui);background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;min-height:100vh}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}.app-container{background:var(--bg-primary);flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.app-content-wrapper{flex:1;display:flex;overflow:hidden}.app-main-content{flex-direction:column;flex:1;min-width:0;display:flex;overflow-y:auto}.sidebar{border-right:1px solid var(--border-color);color:#d4d4d4;width:280px;font-family:var(--font-ui);background:#1c1c1c;flex-direction:column;flex-shrink:0;transition:width .3s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.sidebar.collapsed{width:52px}.sidebar-menu-header{cursor:pointer;background:#252525;border-bottom:1px solid #111;justify-content:space-between;align-items:center;min-height:48px;padding:12px 16px;display:flex}.sidebar-menu-title{color:#fff;text-transform:uppercase;letter-spacing:.5px;align-items:center;gap:10px;font-size:.85rem;font-weight:600;display:flex}.sidebar.collapsed .sidebar-menu-header{justify-content:center;padding:12px 0}.sidebar-active-header{align-items:center;gap:12px;display:flex}.sidebar-back-btn{color:var(--accent-blue);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:.9rem;transition:color .1s;display:flex}.sidebar-back-btn:hover{color:#fff}.sidebar-active-title{color:#fff;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;font-size:.8rem;font-weight:600}.sidebar-menu-close{color:#666;cursor:pointer;font-size:.9rem}.sidebar-nav{flex-direction:column;display:flex}.sidebar-nav-item{color:#a0a0a0;text-align:left;width:100%;font-size:.85rem;font-family:var(--font-ui);cursor:pointer;background:0 0;border:none;border-bottom:1px solid #222;align-items:center;padding:10px 16px;text-decoration:none;transition:all .1s;display:flex}.sidebar.collapsed .sidebar-nav-item{justify-content:center;padding:12px 0}.sidebar.collapsed .sidebar-nav-item i{margin:0 0 0 5px;font-size:1rem}.sidebar-nav-item i:first-child{opacity:.6;width:20px;margin-right:10px}.sidebar-nav-item .nav-label{flex:1}.sidebar-nav-item .chevron{opacity:.4;font-size:.65rem}.sidebar-nav-item:hover,.sidebar-nav-item.active{color:#fff;background:#2a2a2a}.sidebar-section-content{flex:1;padding:16px;overflow-y:auto}.sidebar-section-content::-webkit-scrollbar{width:4px}.sidebar-info{color:#999;padding:20px 16px;font-size:.75rem;line-height:1.5}.sidebar-info strong{color:#ccc}.sidebar-divider{border:none;border-top:1px solid #333;margin:15px 0}.sidebar-info-list{flex-direction:column;gap:8px;padding:0;list-style:none;display:flex}.sidebar-info-list li{padding-left:15px;position:relative}.sidebar-info-list li:before{content:"•";color:#555;position:absolute;left:0}.sidebar-footer{color:#666;background:#111;border-top:1px solid #222;margin-top:auto;padding:16px;font-size:.7rem}.sidebar-footer strong{color:#aaa}.main-content{flex-direction:column;flex:1;display:flex}.navbar{z-index:1000;height:48px;font-family:var(--font-ui);background:#1a1a1a;border-bottom:1px solid #111;flex-shrink:0;justify-content:space-between;align-items:center;padding:0 16px;display:flex}.navbar-left,.navbar-right{align-items:center;gap:16px;display:flex}.navbar-logo-box{background:var(--accent-blue);color:#fff;border-radius:3px;justify-content:center;align-items:center;width:24px;height:24px;font-size:.8rem;display:flex}.navbar-title-text{color:var(--accent-blue);font-size:.95rem;font-weight:500}.navbar-settings-icon{color:#666;cursor:pointer;font-size:.85rem}.navbar-actions{gap:8px;margin-left:8px;display:flex}.navbar-btn-save,.navbar-btn-new{color:#ccc;cursor:pointer;transition:all var(--transition);background:#333;border:1px solid #444;border-radius:3px;padding:4px 12px;font-size:.75rem}.navbar-btn-save:hover,.navbar-btn-new:hover{color:#fff;background:#444}.navbar-btn-save .btn-hint{opacity:.5;margin-left:4px;font-size:.65rem}.navbar-icon-btn{color:#666;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;font-size:1rem;display:flex}.navbar-icon-btn:hover{color:#aaa}.navbar-user-info{color:#666;font-size:.75rem}.navbar-link{color:#888;font-size:.75rem;text-decoration:none}.navbar-link:hover{color:var(--accent-blue)}.navbar-signin-btn{color:#888;cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;font-size:.75rem;display:flex}.navbar-signin-btn:hover{color:#fff}.navbar-brand{align-items:center;gap:12px;text-decoration:none;display:flex}.navbar-title{font-family:var(--font-ui);color:var(--accent-blue);letter-spacing:-.2px;align-items:center;gap:15px;margin:0;font-size:1.3rem;font-weight:500;display:flex}.navbar-title span{color:var(--accent-blue);font-weight:700}.navbar-links{align-items:center;gap:7px;display:flex}.nav-dropdown{display:inline-block;position:relative}.nav-dropdown-btn{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-family:var(--font-ui);transition:all var(--transition);background:0 0;border:1px solid #343434;align-items:center;gap:8px;padding:6px 12px;font-size:.85rem;font-weight:600;display:flex}.nav-dropdown-btn:hover{color:var(--text-primary);background:#ffffff0d;border-color:#555}.nav-dropdown-btn i:first-child{font-size:.95rem}.nav-dropdown-btn i.fa-chevron-down{opacity:.7;margin-left:2px;font-size:.65rem}.nav-dropdown-menu{background:var(--bg-navbar);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);opacity:0;visibility:hidden;min-width:160px;transition:all var(--transition);z-index:100;border:1px solid #404040;flex-direction:column;padding:6px;display:flex;position:absolute;top:calc(100% + 4px);right:0;transform:translateY(-5px)}.nav-dropdown:hover .nav-dropdown-menu,.nav-dropdown-btn:focus+.nav-dropdown-menu,.nav-dropdown-menu:hover{opacity:1;visibility:visible;transform:translateY(0)}.nav-dropdown-item{color:var(--text-secondary);border-radius:var(--radius-sm);align-items:center;gap:10px;padding:8px 12px;font-size:.85rem;text-decoration:none;transition:all .1s;display:flex}.nav-dropdown-item:hover{background:var(--bg-hover);color:var(--text-primary)}.nav-dropdown-item i{text-align:center;width:16px;color:var(--accent-blue);font-size:.9rem}.pattern-bar{background:var(--bg-primary);border-bottom:1px solid var(--border-color);align-items:center;gap:16px;padding:7px 24px;display:flex}.pattern-input-wrapper{flex:1;position:relative}.pattern-input{width:100%;color:var(--accent-cyan);font-family:var(--font-mono);background:0 0;border:1px #0000;outline:none;padding:10px 16px;font-size:1rem;font-weight:600}.pattern-input::placeholder{color:var(--text-muted);font-size:.95rem;font-weight:400}.pattern-input:focus{border-color:var(--border-focus)}.mode-tabs{background:var(--bg-input);border-radius:var(--radius-sm);border:1px solid var(--border-color);gap:2px;padding:3px;display:flex}.whitespace-dot{color:#666;-webkit-user-select:none;user-select:none;pointer-events:none;opacity:.8;vertical-align:middle;width:0;font-size:8px;line-height:1;display:inline-block;position:relative;left:-1.4ch;overflow:visible}.pattern-highlights{font-family:var(--font-mono);white-space:pre;pointer-events:none;color:#0000;padding:10px 16px;font-size:1rem;font-weight:600;line-height:normal;position:absolute;inset:0;overflow:hidden}.mode-tab{color:var(--text-secondary);font-family:var(--font-ui);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition);background:0 0;border:none;padding:6px 12px;font-size:.8rem;font-weight:400}.mode-tab:hover{color:var(--text-primary);background:var(--bg-hover)}.mode-tab.active{color:#fff;background:var(--accent-blue);box-shadow:var(--shadow-sm)}.workspace{flex:1;display:flex;overflow:hidden}.editor-panel{border-right:1px solid var(--border-color);flex-direction:column;flex:1;min-width:0;display:flex}.editor-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);text-transform:uppercase;letter-spacing:.8px;justify-content:space-between;align-items:center;padding:12px 20px;font-size:.8rem;display:flex}.editor-header-label{color:var(--text-secondary);font-weight:600}.editor-header-stats{color:var(--text-muted);font-weight:400}.editor-container{background:var(--bg-secondary);flex:1;display:flex;position:relative;overflow:auto}.line-numbers{background:var(--bg-secondary);color:var(--text-muted);font-family:var(--font-mono);text-align:right;-webkit-user-select:none;user-select:none;border-right:1px solid var(--border-color);flex-direction:column;flex-shrink:0;min-width:48px;padding:16px 0;font-size:14px;line-height:24px;display:flex;overflow:hidden}.line-number{padding:0 12px 0 8px}.line-number.highlighted{color:var(--text-secondary);background:#4dd9e814}.editor-content{flex:1;width:fit-content;min-width:100%;display:grid}.editor-highlights{font-family:var(--font-mono);white-space:pre;word-wrap:normal;pointer-events:none;color:#0000;z-index:0;grid-area:1/1;min-height:100%;padding:16px;font-size:14px;line-height:24px}.editor-textarea{width:100%;height:100%;color:var(--text-primary);font-family:var(--font-mono);resize:none;white-space:pre;word-wrap:normal;z-index:1;caret-color:var(--accent-cyan);background:0 0;border:none;outline:none;grid-area:1/1;margin:0;padding:16px;font-size:14px;line-height:24px;display:block;overflow:hidden}.editor-width-pusher{visibility:hidden;white-space:pre;font-family:var(--font-mono);pointer-events:none;box-sizing:border-box;grid-area:1/1;min-height:100%;padding:16px 50px 16px 16px;font-size:14px;line-height:24px}.editor-textarea::placeholder{color:var(--text-muted)}.editor-highlights .whitespace-dot,.pattern-highlights .whitespace-dot{color:#444}.results-panel{background:var(--bg-primary);flex-direction:column;flex-shrink:0;width:30%;min-width:300px;max-width:460px;display:flex}.results-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-color);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;justify-content:space-between;align-items:center;padding:12px 20px;font-size:.8rem;font-weight:600;display:flex}.results-count{color:var(--text-muted);font-weight:400}.results-count-badge{color:var(--accent-green);letter-spacing:0;text-transform:none;background:#4cff9f26;border-radius:10px;padding:2px 10px;font-size:.75rem;font-weight:600;display:inline-block}.results-body{flex-direction:column;flex:1;gap:10px;padding:16px;display:flex;overflow-y:auto}.empty-state{height:100%;color:var(--text-muted);text-align:center;flex-direction:column;justify-content:center;align-items:center;margin-top:40px;display:flex}.empty-state-icon{color:var(--text-muted);opacity:.5;margin-bottom:16px;font-size:2.5rem}.empty-state-title{color:var(--text-secondary);margin-bottom:8px;font-size:1.1rem;font-weight:600}.empty-state-text{max-width:250px;font-size:.9rem;line-height:1.4}.match-card{background:var(--bg-secondary);border:1px solid var(--border-color);border-left:3px solid var(--match-color-1);border-radius:var(--radius-sm);transition:border-color var(--transition);overflow:hidden}.match-card:nth-child(2){border-left-color:var(--match-color-2)}.match-card:nth-child(3){border-left-color:var(--match-color-3)}.match-card:nth-child(4){border-left-color:var(--match-color-4)}.match-card:nth-child(5){border-left-color:var(--match-color-5)}.match-card:nth-child(6){border-left-color:var(--match-color-6)}.match-card-header{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition);justify-content:space-between;align-items:center;padding:10px 14px;display:flex}.match-card-header:hover{background:var(--bg-hover)}.match-card-title{align-items:center;gap:8px;font-size:.85rem;font-weight:600;display:flex}.match-card-toggle{color:var(--text-muted);transition:transform var(--transition);font-size:.75rem}.match-card-toggle.open{transform:rotate(180deg)}.match-card-label{font-family:var(--font-mono);color:var(--text-primary);font-size:.9rem;font-weight:500}.match-card-range{color:var(--text-muted);font-family:var(--font-mono);font-size:.8rem;font-weight:400}.match-card-actions{gap:4px;display:flex}.match-card-btn{width:28px;height:28px;color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);background:0 0;border:none;justify-content:center;align-items:center;font-size:.8rem;display:flex}.match-card-btn:hover{background:var(--bg-hover);color:var(--text-primary)}.match-card-body{border-top:1px solid var(--border-color);flex-direction:column;gap:8px;padding:10px 14px 14px;display:flex}.match-row{align-items:baseline;gap:10px;font-size:.85rem;display:flex}.match-row-label{color:var(--text-muted);white-space:nowrap;min-width:fit-content;font-weight:500}.match-row-value{font-family:var(--font-mono);color:var(--text-primary);word-break:break-all;white-space:pre-wrap}.match-row-value.quoted:before,.match-row-value.quoted:after{content:"\"";color:var(--text-muted)}.match-full-value{font-family:var(--font-mono);color:var(--text-primary);background:var(--bg-tertiary);border-radius:var(--radius-sm);word-break:break-all;white-space:pre-wrap;padding:3px 10px;font-weight:600}.group-badge{border-radius:var(--radius-sm);color:#111;margin-right:6px;padding:1px 8px;font-size:.7rem;font-weight:700;display:inline-block}.capture-type-label{font-size:.8rem;font-weight:600}.capture-type-label.pos{color:var(--accent-red)}.capture-type-label.str{color:var(--accent-green)}.capture-type-pos{align-items:center;gap:4px;display:inline-flex}.capture-type-pos .pin{font-size:.85rem}.hl-match{color:#0000;border-radius:2px;padding:1px 0}.hl-match-0{background:#4dd9e840}.hl-match-1{background:#a78bfa40}.hl-match-2{background:#4cff9f40}.hl-match-3{background:#ffd16640}.hl-match-4{background:#ff6bb540}.hl-match-5{background:#6b9fff40}.pattern-breakdown{background:var(--bg-secondary);border-top:1px solid var(--border-color);flex-shrink:0;max-height:200px;padding:11.5px 15px;overflow-y:auto}.breakdown-label{color:var(--accent-orange);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;font-size:.68rem;font-weight:600}.breakdown-tokens{flex-wrap:wrap;gap:5.5px;display:flex}.breakdown-token{background:var(--bg-tertiary);border:1px solid var(--border-color);transition:background var(--transition);border-radius:20px;align-items:center;gap:5.5px;padding:4px 10px;font-size:.77rem;display:inline-flex}.breakdown-token:hover{background:var(--bg-hover)}.breakdown-token-raw{font-family:var(--font-mono);color:var(--accent-cyan);font-weight:600}.breakdown-token-desc{color:var(--text-secondary)}.quick-reference{background:var(--bg-secondary);border-top:1px solid var(--border-color);flex-shrink:0;padding:16px 20px}.sidebar-tabs{gap:16px;margin-bottom:12px;display:flex}.sidebar-tab{color:var(--text-muted);cursor:pointer;text-transform:uppercase;letter-spacing:.8px;transition:color var(--transition);background:0 0;border:none;align-items:center;gap:6px;padding:0;font-size:.7rem;font-weight:600;display:flex}.sidebar-tab:hover{color:var(--text-secondary)}.sidebar-tab.active{color:var(--accent-blue)}.examples-list{flex-direction:column;gap:8px;display:flex}.example-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--transition);padding:10px}.example-item:hover{background:var(--bg-hover);border-color:var(--accent-blue)}.example-header{justify-content:space-between;align-items:center;margin-bottom:4px;display:flex}.example-name{color:var(--text-primary);font-size:.75rem;font-weight:700}.example-pattern{font-family:var(--font-mono);color:var(--accent-cyan);background:#06b6d41a;border-radius:4px;padding:2px 6px;font-size:.7rem}.example-desc{color:var(--text-muted);font-size:.65rem;line-height:1.4}.qr-label{color:var(--accent-green);text-transform:uppercase;letter-spacing:.8px;margin-bottom:10px;font-size:.7rem;font-weight:600}.qr-grid{grid-template-columns:1fr;gap:2px;display:grid}.qr-row{align-items:baseline;gap:12px;padding:3px 0;display:flex}.qr-token{font-family:var(--font-mono);color:var(--accent-cyan);min-width:80px;font-size:.85rem;font-weight:600}.qr-desc{color:var(--text-secondary);font-size:.85rem}.gsub-section{border-top:1px solid var(--border-color);background:var(--bg-secondary);padding:12px 20px}.gsub-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px;font-size:.75rem;font-weight:600}.gsub-input{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);width:100%;color:var(--text-primary);font-family:var(--font-mono);transition:border-color var(--transition);outline:none;margin-bottom:8px;padding:8px 12px;font-size:.85rem}.gsub-input:focus{border-color:var(--border-focus)}.gsub-output{background:var(--bg-input);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-family:var(--font-mono);color:var(--accent-green);white-space:pre-wrap;word-break:break-all;min-height:40px;padding:10px 12px;font-size:.85rem}.error-banner{border-radius:var(--radius-sm);color:var(--accent-red);font-family:var(--font-mono);background:#ff6b6b1a;border:1px solid #ff6b6b40;align-items:center;gap:10px;margin:12px;padding:12px 16px;font-size:.8rem;display:flex}.error-icon{flex-shrink:0;font-size:1.1rem}.footer{background:var(--bg-secondary);border-top:1px solid var(--border-color);color:var(--text-muted);flex-shrink:0;justify-content:center;align-items:center;gap:16px;padding:7px 24px;font-size:.75rem;font-weight:500;display:flex}.footer a{color:var(--accent-cyan);transition:color var(--transition);text-decoration:none}.footer a:hover{color:var(--accent-purple)}@media (width<=900px){.workspace{flex-direction:column}.editor-panel{border-right:none;border-bottom:1px solid var(--border-color);min-height:250px}.results-panel{width:100%;max-width:none;min-height:300px}.pattern-bar{flex-direction:column;gap:10px}.navbar{flex-direction:column;justify-content:center;gap:10px}}@media (width<=600px){.navbar-links{flex-wrap:wrap;justify-content:center}.mode-tabs{flex-wrap:wrap}html{font-size:16.5px}}.sidebar-links-list{flex-direction:column;gap:12px;display:flex}.sidebar-link-item{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);color:var(--text-secondary);transition:all var(--transition);align-items:center;gap:12px;padding:10px 14px;font-size:.85rem;text-decoration:none;display:flex}.sidebar-link-item:hover{background:var(--bg-hover);color:#fff;border-color:var(--accent-blue)}.sidebar-link-item i{text-align:center;width:20px;color:var(--accent-blue);font-size:1rem}.sidebar-actions-row{gap:8px;margin-bottom:16px;display:flex}.sidebar-action-btn{color:#ccc;cursor:pointer;transition:all var(--transition);background:#333;border:1px solid #444;border-radius:4px;flex:1;justify-content:center;align-items:center;gap:8px;padding:8px;font-size:.75rem;display:flex}.sidebar-action-btn:hover{color:#fff;background:#444}.sidebar-empty-msg{color:#666;text-align:center;margin-top:20px;font-size:.8rem}.delete-btn{color:#666;cursor:pointer;transition:color var(--transition);background:0 0;border:none;padding:4px;font-size:.85rem}.delete-btn:hover{color:var(--accent-red)}.sidebar-top-actions{background:#1a1a1a;border-bottom:1px solid #111;padding:10px 14px}.sidebar-split-btns{gap:6px;width:100%;display:flex}.sidebar-save-btn{background:var(--accent-blue);color:#fff;cursor:pointer;transition:all var(--transition);white-space:nowrap;border:none;border-radius:4px;flex:7;justify-content:center;align-items:center;gap:8px;padding:8px;font-size:.75rem;font-weight:600;display:flex}.sidebar-new-btn{color:#ccc;cursor:pointer;transition:all var(--transition);background:#333;border:1px solid #444;border-radius:4px;flex:3;justify-content:center;align-items:center;gap:8px;padding:8px;font-size:.75rem;font-weight:500;display:flex}.sidebar-save-btn:hover{background:#2a5eb0}.sidebar-new-btn:hover{color:#fff;background:#444}.sidebar-save-btn .btn-hint{opacity:.6;font-size:.65rem;font-weight:400}