*{margin:0;padding:0;box-sizing:border-box}:root{--bg-primary:#0a0a0a;--bg-secondary:#1a1a1a;--bg-tertiary:#2a2a2a;--bg-card:#141414;--text-primary:#ffffff;--text-secondary:#b3b3b3;--text-muted:#666666;--accent:#00d4ff;--accent-hover:#00b8e6;--accent-glow:rgba(0, 212, 255, 0.3);--border:#333333;--success:#00ff88;--error:#ff4757;--warning:#ffa502;--match-highlight:#ffeb3b;--match-bg:rgba(255, 235, 59, 0.2)}body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;overflow-x:hidden;min-height:100vh;display:flex;flex-direction:column}.container{max-width:100%;width:100%;margin:0 auto;padding:0 20px}main{flex:1;width:100%}.action-toolbar{background:linear-gradient(135deg,var(--bg-card) 0,var(--bg-secondary) 100%);border-bottom:1px solid var(--border);box-shadow:0 2px 10px rgba(0,0,0,.2);padding:1rem 0;position:sticky;top:80px;z-index:100;backdrop-filter:blur(20px)}.action-toolbar-container{max-width:1400px;margin:0 auto;padding:0 20px}.toolbar-main{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;justify-content:space-between}.action-group{display:flex;align-items:center;gap:.8rem}.primary-group{flex:1;min-width:300px}.utility-group{gap:.6rem}.group-separator{width:1px;height:24px;background:var(--border);margin:0 .4rem}.patterns-dropdown{position:relative}.dropdown-trigger{background:linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%);border:1px solid var(--border);color:var(--text-primary);padding:.7rem 1.2rem;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s ease;display:flex;align-items:center;gap:.6rem;white-space:nowrap}.dropdown-trigger:hover{background:linear-gradient(135deg,var(--border) 0,var(--bg-tertiary) 100%);border-color:var(--accent);transform:translateY(-1px)}.dropdown-arrow{transition:transform .3s ease;font-size:.8rem}.dropdown-trigger.active .dropdown-arrow{transform:rotate(180deg)}.dropdown-content{position:absolute;top:100%;left:0;right:0;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.4);margin-top:.5rem;padding:1rem;display:none;z-index:1000;min-width:300px}.dropdown-content.show{display:block;animation:dropdownShow .2s ease}@keyframes dropdownShow{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.patterns-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.pattern-item{background:var(--bg-primary);border:1px solid var(--border);border-radius:6px;padding:.8rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--text-secondary)}.pattern-item:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);transform:translateY(-2px)}.pattern-icon{font-size:1rem}.pattern-label{font-weight:500}.flags-group{display:flex;align-items:center}.flags-container{display:flex;gap:.4rem;background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:.4rem}.flag-toggle{position:relative;cursor:pointer;display:flex;align-items:center;justify-content:center}.flag-toggle input[type=checkbox]{position:absolute;opacity:0;width:0;height:0}.flag-label{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:6px;font-family:Monaco,Menlo,Consolas,monospace;font-weight:600;font-size:.9rem;color:var(--text-muted);transition:all .3s ease}.flag-toggle input:checked+.flag-label{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);box-shadow:0 2px 8px var(--accent-glow)}.flag-toggle:hover .flag-label{border-color:var(--accent);transform:translateY(-1px)}.flag-tooltip{display:none;position:absolute;top:-40px;left:50%;transform:translateX(-50%);background:var(--bg-primary);border:1px solid var(--border);border-radius:4px;padding:.4rem .6rem;font-size:.8rem;color:var(--text-secondary);white-space:nowrap;z-index:1001}.flag-toggle:hover .flag-tooltip{display:block}.main-container{display:grid;grid-template-columns:1fr auto 1fr;gap:2rem;padding:2rem 20px;max-width:100%;width:100%;min-height:calc(100vh - 300px)}.input-section,.output-section{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem;position:relative;overflow:hidden;height:700px;display:flex;flex-direction:column}.input-section::before,.output-section::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--success))}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border)}.section-title{font-size:1.2rem;font-weight:600;color:var(--accent)}.char-count{font-size:.9rem;color:var(--text-muted)}.regex-input-section{margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}.regex-input-container{position:relative;margin-bottom:.5rem}.regex-input{width:100%;background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:.8rem;color:var(--text-primary);font-family:Monaco,Menlo,Consolas,monospace;font-size:16px;transition:border-color .3s ease}.regex-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.regex-input::placeholder{color:var(--text-muted)}.editor-container{position:relative;height:420px;border:1px solid var(--border);border-radius:8px;overflow:hidden;transition:border-color .3s ease;flex-shrink:0}.editor-container:focus-within{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-glow)}.editor-with-lines{display:flex;height:100%}.line-numbers-container{background:var(--bg-secondary);border-right:1px solid var(--border);padding:1rem .5rem 1rem .5rem;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;color:var(--text-muted);text-align:right;user-select:none;min-width:50px;overflow:hidden;white-space:pre-line;word-break:keep-all}.editor-textarea{flex:1;background:var(--bg-primary);border:none;padding:1rem;color:var(--text-primary);font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;resize:none;outline:0;overflow-y:auto;white-space:pre;word-wrap:normal}.editor-textarea::placeholder{color:var(--text-muted)}.output-container{height:100%;position:relative}.output-editor{width:100%;height:100%;background:var(--bg-primary);color:var(--text-primary);white-space:pre-wrap;word-wrap:break-word;overflow:auto;font-family:Monaco,Menlo,Consolas,monospace;font-size:14px;line-height:1.5;padding:1rem;scrollbar-width:thin;scrollbar-color:var(--border) var(--bg-primary)}.output-editor::-webkit-scrollbar{width:8px}.output-editor::-webkit-scrollbar-track{background:var(--bg-primary)}.output-editor::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}.output-editor::-webkit-scrollbar-thumb:hover{background:var(--accent)}.controls-section{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:1.5rem 1rem;display:flex;flex-direction:column;gap:1.5rem;min-width:200px;max-width:220px;height:fit-content;position:sticky;top:180px}.help-section{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:1rem}.help-content{display:flex;flex-direction:column;gap:.4rem}.help-item{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--text-secondary)}.help-item code{background:var(--bg-secondary);color:var(--accent);padding:.2rem .4rem;border-radius:3px;font-family:Monaco,Menlo,Consolas,monospace;font-size:.75rem;font-weight:600;min-width:25px;text-align:center}.controls-title{text-align:center;font-size:1.3rem;font-weight:600;color:var(--accent);margin-bottom:.5rem}.btn-group{display:flex;flex-direction:column;gap:.8rem}.btn{background:linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%);color:var(--text-primary);border:1px solid var(--border);padding:.7rem 1.2rem;border-radius:8px;cursor:pointer;font-weight:600;font-size:.9rem;transition:all .3s ease;position:relative;overflow:hidden;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.15)}.btn-primary{background:linear-gradient(135deg,var(--accent) 0,var(--accent-hover) 100%);color:var(--bg-primary);border:1px solid var(--accent);box-shadow:0 4px 15px rgba(0,212,255,.3);font-weight:700}.btn-secondary{background:linear-gradient(135deg,var(--bg-tertiary) 0,var(--bg-secondary) 100%);color:var(--text-primary);border:1px solid var(--border)}.btn-utility{background:linear-gradient(135deg,var(--bg-secondary) 0,var(--bg-tertiary) 100%);color:var(--text-secondary);border:1px solid var(--border);padding:.6rem 1rem;font-size:.85rem}.btn-danger{background:linear-gradient(135deg,var(--error) 0,#e63946 100%);color:#fff;border:1px solid var(--error)}.btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.btn:hover::before{left:100%}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}.btn-primary:hover{box-shadow:0 6px 20px var(--accent-glow)}.btn-secondary:hover{background:linear-gradient(135deg,var(--border) 0,var(--bg-tertiary) 100%);border-color:var(--accent)}.btn-utility:hover{background:linear-gradient(135deg,var(--accent) 0,var(--accent-hover) 100%);color:var(--bg-primary);border-color:var(--accent)}.btn-danger:hover{box-shadow:0 6px 20px rgba(255,71,87,.4)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.status-bar{margin-top:1rem;padding:.8rem;border-radius:8px;font-size:.9rem;text-align:center;transition:all .3s ease;height:3rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid transparent;background:0 0;opacity:0}.status-success{background:rgba(0,255,136,.1)!important;border:1px solid var(--success)!important;color:var(--success);opacity:1!important}.status-error{background:rgba(255,71,87,.1)!important;border:1px solid var(--error)!important;color:var(--error);opacity:1!important}.status-warning{background:rgba(255,165,2,.1)!important;border:1px solid var(--warning)!important;color:var(--warning);opacity:1!important}.status-default{color:var(--text-secondary);opacity:.7!important}.regex-options{display:flex;flex-direction:column;gap:.5rem}.option-group{display:flex;align-items:center;gap:.5rem}.option-group label{color:var(--text-secondary);font-size:.9rem;cursor:pointer}.option-group input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.regex-stats{background:var(--bg-primary);border:1px solid var(--border);border-radius:8px;padding:1rem;margin-top:1rem;overflow-y:scroll;min-height:108px}.stats-grid{display:flex;flex-direction:column;gap:.6rem}.stat-item{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;padding:.3rem 0;border-bottom:1px solid var(--border)}.stat-item:last-child{border-bottom:none}.stat-label{color:var(--text-secondary);flex-shrink:0;min-width:80px}.stat-value{color:var(--accent);font-weight:600;text-align:right;word-break:break-word}.copy-btn{position:absolute;top:1rem;right:1rem;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);padding:.5rem .8rem;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .3s ease;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.3)}.copy-btn:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);transform:translateY(-1px);box-shadow:0 4px 12px var(--accent-glow)}.match-highlight{background-color:var(--match-bg);color:var(--match-highlight);font-weight:700;border-radius:2px;padding:1px 2px}.floating-particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden;z-index:1}.particle{position:absolute;width:2px;height:2px;background:var(--accent);border-radius:50%;opacity:.3;animation:float 10s infinite linear}@keyframes float{0%{transform:translateY(100vh) translateX(0);opacity:0}10%{opacity:.3}90%{opacity:.3}100%{transform:translateY(-100px) translateX(100px);opacity:0}}footer{background:var(--bg-secondary);border-top:1px solid var(--border);padding:3rem 0 2rem;margin-top:auto;width:100%}.footer-container{max-width:1400px;margin:0 auto;padding:0 20px}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;margin-bottom:2rem}.footer-section h3{color:var(--accent);font-size:1.2rem;margin-bottom:1rem}.footer-section p{color:var(--text-secondary);line-height:1.6}.footer-links{list-style:none;padding:0}.footer-links li{margin-bottom:.5rem}.footer-links a{color:var(--text-secondary);text-decoration:none;transition:color .3s ease}.footer-links a:hover{color:var(--accent)}.footer-social{display:flex;gap:1rem;margin-top:1rem}.social-link{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:8px;color:var(--text-secondary);text-decoration:none;transition:all .3s ease}.social-link:hover{background:var(--accent);color:var(--bg-primary);border-color:var(--accent);transform:translateY(-2px)}.footer-bottom{text-align:center;padding-top:2rem;border-top:1px solid var(--border);color:var(--text-muted)}.footer-bottom p{margin-bottom:.5rem}@media (max-width:1200px){.main-container{grid-template-columns:1fr;gap:1.5rem}.controls-section{position:static;min-width:auto;max-width:none;order:2}.toolbar-main{flex-direction:column;gap:1.5rem;align-items:stretch}.action-group{justify-content:center}.primary-group{min-width:auto;flex:none}}@media (max-width:768px){.nav-links{display:none}.features{gap:1rem}.feature{font-size:.8rem}.editor-container{height:300px}.logo{font-size:2rem}.main-container{padding:1rem}.footer-content{grid-template-columns:1fr;gap:1.5rem}.footer-social{justify-content:center}.action-toolbar{position:relative;top:0;padding:1rem 0}.action-toolbar-container{padding:0 1rem}.toolbar-main{gap:1rem}.action-group{width:100%;justify-content:space-around;flex-wrap:wrap}.primary-group{order:3}.patterns-dropdown{order:1;width:100%}.dropdown-trigger{width:100%;justify-content:center}.flags-group{order:2;justify-content:center}.utility-group{order:4;width:100%;justify-content:center}.btn{padding:.6rem 1rem;font-size:.85rem}.group-separator{display:none}.patterns-grid{grid-template-columns:1fr}.dropdown-content{min-width:auto;left:0;right:0}.controls-section{top:0}}