.regex-tool-wrapper { --p-bg: #ffffff; --p-border: #e2e8f0; --p-primary: #8b5cf6; --p-text: #0f172a; width: 100%; max-width: 1200px; margin: 0 auto; background: var(--p-bg); border-radius: 24px; padding: 32px; border: 1px solid var(--p-border); box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05); transition: 0.3s; box-sizing: border-box;}
.regex-header { font-size: 1.5rem; font-weight: 600; color: var(--p-text); margin-bottom: 8px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;}
.regex-badge { background: #ede9fe; color: #5b21b6; padding: 4px 12px; border-radius: 30px; font-size: 0.8rem; font-weight: 500; }
.regex-subtitle { color: #64748b; font-size: 0.95rem; padding-bottom: 16px; border-bottom: 1px solid var(--p-border); margin-bottom: 24px; }

.regex-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }

.regex-panel-title { font-weight: 600; color: var(--p-text); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }

.regex-input-group { display: flex; align-items: center; background: #f8fafc; border: 2px solid var(--p-border); border-radius: 12px; padding: 0 16px; transition: 0.2s; margin-bottom: 20px; box-sizing: border-box; width: 100%;}
.regex-input-group:focus-within { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); background: #ffffff; }
.regex-slash { font-size: 1.2rem; color: #94a3b8; font-weight: 700; font-family: monospace; flex-shrink: 0;}
.regex-pattern { flex: 1; min-width: 0; border: none; background: transparent; padding: 16px 8px; font-size: 1.1rem; color: var(--p-text); outline: none; font-family: monospace; width: 100%; box-sizing: border-box;}
.regex-flags { width: 80px; min-width: 60px; border: none; background: transparent; padding: 16px 8px; font-size: 1.1rem; color: var(--p-primary); outline: none; font-family: monospace; font-weight: 600; border-left: 1px solid #cbd5e1; box-sizing: border-box; flex-shrink: 0;}

.regex-textarea { width: 100%; min-width: 0; height: 250px; padding: 16px; background: #f8fafc; border: 2px solid var(--p-border); color: var(--p-text); border-radius: 12px; outline: none; resize: vertical; font-family: monospace; font-size: 0.95rem; line-height: 1.6; transition: 0.2s; box-sizing: border-box;}
.regex-textarea:focus { border-color: var(--p-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1); background: #ffffff; }

.regex-result-box { width: 100%; min-width: 0; height: 250px; padding: 16px; background: #ffffff; border: 2px solid var(--p-border); border-radius: 12px; overflow-y: auto; color: var(--p-text); font-family: monospace; font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box;}
.regex-result-box mark { background-color: #d8b4fe; color: #4c1d95; border-radius: 4px; padding: 2px 0; box-shadow: 0 0 0 1px #a855f7; }
.regex-result-box mark:nth-child(even) { background-color: #a7f3d0; color: #065f46; box-shadow: 0 0 0 1px #10b981; }

.regex-matches-list { margin-top: 20px; border: 1px solid var(--p-border); border-radius: 12px; background: #f8fafc; max-height: 300px; overflow-y: auto; }
.regex-match-item { padding: 12px 16px; border-bottom: 1px solid var(--p-border); font-family: monospace; font-size: 0.9rem; color: var(--p-text); word-break: break-all; }
.regex-match-item:last-child { border-bottom: none; }
.regex-group-badge { display: inline-block; background: #e2e8f0; color: #475569; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; margin-right: 8px; font-weight: 600; }

.regex-error { color: #ef4444; font-size: 0.9rem; font-weight: 600; margin-top: -12px; margin-bottom: 16px; display: none; word-break: break-word; }

@media(max-width: 850px) { 
    .regex-layout { grid-template-columns: 1fr; } 
    .regex-tool-wrapper { padding: 20px; border-radius: 16px; }
}
@media(max-width: 640px) {
    .regex-header { font-size: 1.25rem; line-height: 1.4; gap: 8px; }
}

[data-theme="dark"] .regex-tool-wrapper { background: #1e293b !important; border-color: #334155 !important; }
[data-theme="dark"] .regex-input-group, [data-theme="dark"] .regex-textarea, [data-theme="dark"] .regex-result-box { background: #0f172a !important; border-color: #475569 !important; color: #f8fafc; }
[data-theme="dark"] .regex-input-group:focus-within, [data-theme="dark"] .regex-textarea:focus { background: #1e293b !important; }
[data-theme="dark"] .regex-pattern, [data-theme="dark"] .regex-flags { color: #f8fafc; }
[data-theme="dark"] .regex-flags { border-color: #475569; color: #a78bfa; }
[data-theme="dark"] .regex-result-box mark { background-color: rgba(139, 92, 246, 0.4); color: #ddd6fe; box-shadow: 0 0 0 1px #8b5cf6; }
[data-theme="dark"] .regex-result-box mark:nth-child(even) { background-color: rgba(16, 185, 129, 0.3); color: #a7f3d0; box-shadow: 0 0 0 1px #10b981; }
[data-theme="dark"] .regex-matches-list { background: #0f172a; border-color: #475569; }
[data-theme="dark"] .regex-match-item { border-color: #475569; color: #cbd5e1; }
[data-theme="dark"] .regex-group-badge { background: #334155; color: #94a3b8; }