/* ============================================================
   正则表达式在线测试 —— 页面私有样式（/devtools/regex-tester）
   仅放本工具独有结构，通用样式一律复用 devtools.css / tool-detail.css
   ============================================================ */

/* 匹配 / 替换 模式切换（分段控件） */
.rt-seg {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--c-border);
    border-radius: 11px;
    background: var(--c-bg-soft);
}

.rt-seg-btn {
    appearance: none;
    border: 0;
    padding: 7px 15px;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-text-sub);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    white-space: nowrap;
}

.rt-seg-btn:hover { color: var(--c-text); }

.rt-seg-btn.active {
    background: var(--c-bg-card);
    color: var(--c-primary);
    box-shadow: 0 1px 3px rgba(16, 24, 40, .12);
}

/* 修饰符输入框 */
.rt-flags {
    width: 92px;
    text-align: center;
    letter-spacing: 1.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 正则输入框用等宽字体 */
#rtRegex {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    width: 100%;
}

/* 匹配 / 替换 面板切换 */
.rt-pane[hidden] { display: none; }

/* 命中高亮 */
.rt-mark {
    padding: 0 2px;
    border-radius: 3px;
    background: rgba(0, 102, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(0, 102, 255, .25);
    color: var(--c-text);
}

/* 结果输出预格式化文本 */
.rt-out {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 分组捕获表格 */
.rt-groups { margin-top: 14px; overflow: auto; }
.rt-groups .dt-table { min-width: 320px; }
.rt-caption {
    padding: 0 0 8px;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: var(--c-text-sub);
}

.rt-inline-head { margin-top: 14px; }

@media (max-width: 640px) {
    .rt-seg { width: 100%; }
    .rt-seg-btn { flex: 1; }
    .rt-flags { width: 100%; }
}

@media (prefers-color-scheme: dark) {
    /* 主题由 :root[data-theme] 控制，这里仅保证未显式设置主题时高亮依旧清晰 */
    .rt-mark { background: rgba(77, 148, 255, .26); }
}