/* ==========================================================================
   北极星工坊 · 正则面板专用样式
   ---------------------------------------------------------------------------
   ★ 只新增不覆盖：本文件里**没有任何**全局选择器改写，全部收在 .rxp 作用域下，
     所以不会和另一位同事正在改的 style.css / 各页内联 <style> 打架。
   ★ 配色一律走主题变量（--bg / --panel / --ink / --ac1 …），八套护眼主题自动跟随，
     一处都不硬编码白底黑字。
   ★ 移动端：375px 下靠 grid 塌成单列 + min-width:0 防溢出 + 长串 break-all。
   ========================================================================== */

.rxp{
  --rxp-pad:14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--rxp-pad);
  margin:0 0 16px;
  color:var(--ink);
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

/* ---------- 标题行 ---------- */
.rxp-h{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 6px;
}
.rxp-h h3{
  margin:0;font-size:15px;font-weight:800;
  display:flex;align-items:center;gap:7px;min-width:0;
}
.rxp-count{font-size:11.5px;font-weight:600;color:var(--ink3)}
.rxp-hacts{flex:1 1 auto;display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end;min-width:0}
@media (max-width:520px){
  .rxp-hacts{justify-content:flex-start;width:100%}
}

/* 尺寸补丁：借用全站 .btn，但要小一号塞进标题行里，不去改 .btn 本身 */
.rxp .btn.rxp-sm{padding:6px 11px;font-size:12px;border-radius:9px}
.rxp .btn.rxp-xs{padding:4px 9px;font-size:11.5px;border-radius:8px}

.rxp-hint{margin:0 0 10px;color:var(--ink3);font-size:12px;line-height:1.72}
.rxp-hint b{color:var(--ink2)}
.rxp-hint code{
  background:var(--panel2);border:1px solid var(--line);border-radius:6px;
  padding:1px 5px;font-size:11.5px;
}

/* ---------- 规则列表 ---------- */
.rxp-list{display:flex;flex-direction:column;gap:7px;min-width:0}
.rxp-empty{
  padding:22px 14px;text-align:center;color:var(--ink3);
  font-size:12.5px;line-height:1.8;
  border:1px dashed var(--line);border-radius:12px;background:var(--panel2);
}

.rxp-item{
  border:1px solid var(--line);border-radius:12px;
  background:var(--panel2);padding:9px 11px;min-width:0;
  transition:border-color .15s;
}
.rxp-item.open{border-color:var(--acline);background:var(--panel)}
.rxp-item.disabled{opacity:.55}

.rxp-irow{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;
}
.rxp-irow input[type=checkbox]{accent-color:var(--ac1);flex:none;margin:0;cursor:pointer}
.rxp-nm{
  flex:0 1 auto;min-width:0;font-size:12.5px;font-weight:700;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%;
}
.rxp-nm:hover{color:var(--ac1)}
.rxp-sp{flex:1 1 0;min-width:0}
.rxp-x{
  border:0;background:transparent;cursor:pointer;color:var(--ink3);
  font-size:13px;padding:2px 5px;border-radius:6px;flex:none;
}
.rxp-x:hover{color:var(--err);background:var(--errsoft)}

.rxp-tg{
  font-size:10.5px;padding:2px 8px;border-radius:99px;
  background:var(--acsoft);color:var(--ac1);font-weight:800;flex:none;white-space:nowrap;
}
.rxp-tg.off{background:var(--panel2);border:1px solid var(--line);color:var(--ink3)}
.rxp-tg.warn{background:var(--warnsoft);color:var(--warn)}
.rxp-tg.bad{background:var(--errsoft);color:var(--err)}

/* findRegex 一行源码：必须能断行，否则手机端会被顶破容器 */
.rxp-code{
  margin-top:6px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11.5px;line-height:1.55;color:var(--ink2);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  padding:5px 8px;
  white-space:pre-wrap;word-break:break-all;overflow-wrap:anywhere;
  max-height:74px;overflow:auto;
}

/* ---------- 展开的编辑器 ---------- */
.rxp-ed{
  margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:10px;min-width:0;
}
.rxp-fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.rxp-fld>span{font-size:11.5px;font-weight:700;color:var(--ink3)}
.rxp-fld>span small{font-weight:500;color:var(--ink3)}

.rxp-ta{
  width:100%;box-sizing:border-box;min-width:0;
  border:1px solid var(--line);border-radius:10px;
  background:var(--panel);color:var(--ink);
  padding:8px 10px;font:12.5px/1.65 inherit;resize:vertical;
}
.rxp-ta.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px}
.rxp-ta:focus{outline:none;border-color:var(--acline);box-shadow:0 0 0 3px var(--acsoft)}
input[type=text].rxp-ta{padding:7px 10px}

.rxp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
.rxp-lbl{font-size:11.5px;font-weight:700;color:var(--ink3);flex:none}
.rxp-chk{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);
  font-size:11.5px;font-weight:600;cursor:pointer;user-select:none;color:var(--ink2);
  min-width:0;
}
.rxp-chk input{accent-color:var(--ac1);margin:0}
.rxp-chk.on{background:var(--acsoft);border-color:var(--acline);color:var(--ac1)}

.rxp-verdict{
  font-size:12px;line-height:1.75;color:var(--ink2);
  background:var(--panel2);border:1px solid var(--line);border-radius:9px;
  padding:7px 10px;display:flex;flex-direction:column;gap:3px;
}
.rxp-good{color:var(--ok);font-weight:600}
.rxp-warn{color:var(--warn);font-weight:600}
.rxp-bad{color:var(--err);font-weight:600}

/* ---------- 测试区 ---------- */
.rxp-test{margin-top:14px;padding-top:13px;border-top:1px solid var(--line);min-width:0}
.rxp-sub{font-size:12.5px;font-weight:800;color:var(--ink2);margin:0 0 6px}
.rxp-sub2{font-size:11.5px;font-weight:800;color:var(--ink3);margin:0 0 5px}
.rxp-stat{font-size:11.5px;margin:6px 0 8px;min-height:1em}

.rxp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-width:0}
@media (max-width:640px){.rxp-grid2{grid-template-columns:1fr}}

.rxp-box{
  border:1px solid var(--line);border-radius:12px;padding:11px 12px;
  background:
    repeating-conic-gradient(var(--line2) 0% 25%, transparent 0% 50%) 50% / 18px 18px;
  max-height:300px;overflow:auto;min-width:0;
}
.rxp-stage{
  font-size:12.5px;line-height:1.7;color:var(--ink);
  word-break:break-word;overflow-wrap:anywhere;min-width:0;
}
.rxp-stage details{font-family:inherit;font-size:12.5px}

.rxp-hitgrp{
  font-size:11px;color:var(--ink3);font-weight:700;
  margin:7px 0 3px;
}
.rxp-hitgrp:first-child{margin-top:0}
.rxp-hit{
  display:inline-block;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size:11.5px;padding:2px 7px;border-radius:7px;
  background:var(--acsoft);color:var(--ac1);margin:0 5px 5px 0;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  vertical-align:top;
}
.rxp-hit.none{background:var(--errsoft);color:var(--err)}

/* ---------- 导入抽屉 ---------- */
.rxp-imp{
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);min-width:0;
}
[hidden].rxp-imp{display:none !important}

/* ---------- 375px 窄屏收敛 ---------- */
@media (max-width:420px){
  .rxp{--rxp-pad:11px;border-radius:12px}
  .rxp-h h3{font-size:14.5px}
  .rxp-code{max-height:60px;font-size:11px}
  .rxp-irow{gap:6px}
  .rxp-nm{flex:1 1 100%;max-width:100%}
  .rxp-hacts .btn.rxp-sm{flex:1 1 auto;justify-content:center}
  .rxp-row>.btn.rxp-xs{flex:1 1 auto}
}