.regex-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 24px 0 48px; }
@media (max-width: 768px) { .regex-layout { grid-template-columns: 1fr; } }

.regex-input-row { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.regex-slash { font-size: 18px; color: #165DFF; font-weight: 600; font-family: monospace; }
.regex-pattern-input { flex: 1; padding: 8px 10px !important; font-size: 14px; font-family: monospace; }
.regex-flags-input { width: 60px; padding: 8px 6px !important; font-size: 14px; font-family: monospace; text-align: center; }

.regex-flags-hint { display: flex; gap: 12px; flex-wrap: wrap; }
.rule-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #4e5969; cursor: pointer; white-space: nowrap; }
.rule-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: #165DFF; }

.regex-error { padding: 8px 12px; background: #fff2f0; border: 1px solid #ffccc7; border-radius: 6px; color: #F53F3F; font-size: 13px; margin-top: 8px; }

.match-highlight { padding: 12px; background: #f7f8fa; border-radius: 8px; font-family: monospace; font-size: 13px; line-height: 1.8; white-space: pre-wrap; word-break: break-all; min-height: 60px; }
.match-highlight .hl { background: #e8f3ff; color: #165DFF; border-radius: 2px; padding: 0 2px; }

.match-groups { margin-top: 12px; }
.match-group-item { padding: 6px 10px; background: #f7f8fa; border-radius: 6px; margin-bottom: 4px; font-size: 12px; font-family: monospace; }
.match-group-item span { color: #86909c; margin-right: 8px; }

.template-list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.template-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #f7f8fa; border-radius: 6px; cursor: pointer; font-size: 13px; }
.template-item:hover { background: #e8f3ff; }
.template-name { font-weight: 500; color: #1d2129; }
.template-regex { color: #86909c; font-family: monospace; font-size: 11px; margin-left: auto; }