/* 正则测试器 + Markdown 预览 UI(中英页共用) */
.rx-grid, .mdp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 860px) { .rx-grid, .mdp-grid { grid-template-columns: 1fr; } }
.rx-card, .mdp-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.rx-card h2, .mdp-card h2 { font-size: 14px; font-weight: 600; margin-bottom: 12px; color: var(--text2); }
.rx-row { display: flex; gap: 10px; margin-bottom: 12px; }
.rx-row input {
  font: inherit; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; background: var(--bg); color: var(--text);
}
#rxPattern { flex: 1; font-family: "SF Mono", Menlo, monospace; font-size: 14px; }
#rxFlags { width: 90px; font-family: "SF Mono", Menlo, monospace; font-size: 14px; }
.rx-card textarea, .mdp-card textarea {
  flex: 1; min-height: 220px; resize: vertical;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  background: var(--bg); color: var(--text);
}
.rx-result {
  flex: 1; min-height: 220px; overflow: auto;
  font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.7;
  border: 1px solid var(--border); border-radius: 10px; padding: 12px;
  background: var(--bg); white-space: pre-wrap; word-break: break-all;
}
.rx-result mark {
  background: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text); border-radius: 3px; padding: 0 1px;
}
.rx-err { color: #d0726c; font-size: 12.5px; }
.rx-meta { font-size: 12.5px; color: var(--text2); margin-top: 10px; min-height: 18px; }
.rx-groups { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.rx-group { font-size: 12px; color: var(--text2); }
.rx-group code {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 7px; font-size: 11.5px; color: var(--text);
}
.rx-g { color: var(--accent); font-weight: 600; font-family: "SF Mono", Menlo, monospace; }
.rx-k { color: var(--accent); font-family: "SF Mono", Menlo, monospace; }

/* Markdown 预览排版 */
.mdp-preview {
  flex: 1; min-height: 220px; overflow: auto;
  border: 1px solid var(--border); border-radius: 10px; padding: 16px;
  background: var(--bg); font-size: 14px; line-height: 1.7;
}
.mdp-preview h1, .mdp-preview h2, .mdp-preview h3 { margin: 14px 0 8px; line-height: 1.3; }
.mdp-preview h1 { font-size: 22px; } .mdp-preview h2 { font-size: 18px; } .mdp-preview h3 { font-size: 15px; }
.mdp-preview p { margin: 8px 0; }
.mdp-preview code {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 5px; padding: 1px 6px; font-size: 12.5px;
  font-family: "SF Mono", Menlo, monospace;
}
.mdp-preview pre {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; padding: 12px; overflow: auto;
}
.mdp-preview pre code { border: 0; padding: 0; background: none; }
.mdp-preview blockquote {
  border-left: 3px solid var(--accent); margin: 10px 0;
  padding: 4px 14px; color: var(--text2);
}
.mdp-preview ul, .mdp-preview ol { padding-left: 22px; margin: 8px 0; }
.mdp-preview table { border-collapse: collapse; margin: 10px 0; }
.mdp-preview th, .mdp-preview td { border: 1px solid var(--border); padding: 6px 12px; font-size: 13px; }
.mdp-preview img { max-width: 100%; }
.mdp-wordcount { font-size: 12px; color: var(--text2); margin-top: 8px; }