.regex-tool-section{color:#e2e8f0;background:#0b1220;padding:90px 20px}.regex-tool-container{max-width:900px;margin:0 auto}.regex-tool-heading{text-align:center;margin-bottom:40px}.regex-tool-heading .section-label{color:#2dd4bf;letter-spacing:2px;font-size:12px;font-weight:700}.regex-tool-heading h1{margin:12px 0;font-size:36px}.regex-tool-heading p{color:#94a3b8;font-size:16px}.regex-panel{background:#111c2e;border:1px solid #26364d;border-radius:16px;padding:30px}.regex-panel>label,.regex-highlight-section h3,.regex-results-header h3{color:#e2e8f0;margin-bottom:12px;font-size:15px;font-weight:600;display:block}.regex-pattern-row{background:#0b1220;border:1px solid #334155;border-radius:8px;align-items:center;gap:10px;margin-bottom:16px;padding:0 14px;display:flex}.regex-slash{color:#2dd4bf;font-size:20px;font-weight:700}#regex-pattern{color:#f8fafc;background:0 0;border:none;outline:none;width:100%;min-width:0;padding:14px 0;font-family:monospace;font-size:15px}.regex-flags{flex-wrap:wrap;gap:20px;margin-bottom:24px;display:flex}.regex-flags label{color:#94a3b8;cursor:pointer;align-items:center;gap:7px;font-size:13px;display:flex}.regex-flags input{accent-color:#2dd4bf}#regex-test-text{box-sizing:border-box;resize:vertical;color:#e2e8f0;background:#0b1220;border:1px solid #334155;border-radius:8px;outline:none;width:100%;min-height:150px;margin-bottom:20px;padding:15px;font-family:monospace;font-size:14px;line-height:1.6;display:block}#regex-pattern:focus,#regex-test-text:focus{border-color:#2dd4bf}.regex-actions{flex-wrap:wrap;gap:12px;margin-bottom:20px;display:flex}.regex-actions button{cursor:pointer;border-radius:8px;padding:11px 20px;font-size:14px;font-weight:600;transition:all .2s}.regex-primary-btn{color:#0b1220;background:#2dd4bf;border:1px solid #2dd4bf}.regex-primary-btn:hover{background:#5eead4}.regex-secondary-btn{color:#cbd5e1;background:0 0;border:1px solid #475569}.regex-secondary-btn:hover{color:#2dd4bf;border-color:#2dd4bf}.regex-status{color:#94a3b8;background:#1e293b;border-radius:8px;margin-bottom:28px;padding:12px 15px;font-size:13px}.regex-status.success{color:#a7f3d0;background:#064e3b}.regex-status.error{color:#fecaca;background:#7f1d1d}.regex-status.warning{color:#fde68a;background:#78350f}.regex-results{margin-bottom:28px}.regex-results-header{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.regex-results-header h3{margin:0}#regex-match-count{color:#2dd4bf;font-size:13px}.regex-match-list{flex-direction:column;gap:8px;display:flex}.regex-match-item{background:#0b1220;border:1px solid #26364d;border-radius:8px;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;display:flex}.regex-match-number{color:#2dd4bf;font-size:12px;font-weight:700}.regex-match-item code{color:#f8fafc;overflow-wrap:anywhere;font-family:monospace}.regex-match-position{color:#64748b;margin-left:auto;font-size:12px}.regex-empty{color:#94a3b8;padding:12px 0;font-size:13px}.regex-highlighted-text{white-space:pre-wrap;overflow-wrap:anywhere;color:#cbd5e1;background:#0b1220;border:1px solid #26364d;border-radius:8px;min-height:60px;padding:18px;font-family:monospace;font-size:14px;line-height:1.7}.regex-highlighted-text mark{color:#ccfbf1;background:#0f766e;border-radius:3px;padding:2px 0}@media (width<=600px){.regex-tool-section{padding:60px 15px}.regex-panel{padding:20px 15px}.regex-tool-heading h1{font-size:28px}.regex-actions button{flex:auto}.regex-match-position{width:100%;margin-left:0}}.regex-info ul,.regex-info ol{margin:12px 0 22px;padding-left:1.5rem}.regex-info li{margin-bottom:5px;padding-left:3px;line-height:1.65}.regex-info li::marker{color:#56ddc2}details>summary{cursor:pointer;box-sizing:border-box;min-height:44px;padding:12px 8px}