/* Regex Tester — локальные стили */
.rx { padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rx .notice { margin: 0; }
.rx-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rx-pat {
  flex: 1 1 360px; min-width: 0; display: flex; align-items: center; gap: 2px; padding: 0 10px; height: 46px;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-ctl); font: 400 15px/1.5 var(--mono);
}
.rx-pat:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.rx-pat.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(198, 40, 40, .2); }
.rx-delim { color: var(--muted); flex: none; white-space: nowrap; }
.rx-flagstr { color: var(--blue); }
.rx-pwrap { position: relative; flex: 1; min-width: 0; height: 100%; }
.rx-phl, .rx-pwrap input {
  position: absolute; inset: 0; margin: 0; padding: 0 4px; border: 0; font: inherit; line-height: 44px; white-space: pre; letter-spacing: 0;
}
.rx-phl { overflow: hidden; color: var(--ink); pointer-events: none; background: none; }
.rx-pwrap input { width: 100%; background: transparent; color: transparent; caret-color: var(--ink); outline: none; }
.rx-pwrap input::placeholder { color: var(--muted); }
.rx-pwrap input::selection { background: rgba(36, 81, 232, .25); color: transparent; }
.rx-phl .t-esc { color: #B4530A; }
.rx-phl .t-cls { color: #0B7A55; }
.rx-phl .t-grp { color: var(--blue); font-weight: 600; }
.rx-phl .t-qnt { color: #9C27B0; }
.rx-phl .t-anc, .rx-phl .t-dot { color: #C2185B; }
.rx-phl .t-alt { color: var(--blue); font-weight: 700; }
.rx-phl .t-bad { color: var(--danger); text-decoration: wavy underline; }
.rx-phl .pair { background: rgba(36, 81, 232, .18); border-radius: 3px; }
.rx-top-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rx-lib { height: 36px; padding: 0 10px; font: 400 14px var(--font); color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; max-width: 100%; }
.rx-flags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.rx-flag {
  min-width: 40px; height: 36px; padding: 0 10px; font: 600 15px var(--mono); color: var(--muted); background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; cursor: pointer;
}
.rx-flag[aria-pressed="true"] { background: var(--blue-tint); color: var(--blue); border-color: var(--blue); }
.rx-flag:focus-visible { outline: none; box-shadow: var(--focus); }
.rx-hints:empty, .rx-info:empty { display: none; }
.rx-hints p, .rx-info p { margin: 0 0 4px; padding: 6px 12px; border-radius: 10px; font-size: 14px; background: var(--blue-tint); }
.rx-info p.warn { background: var(--warn-tint); color: var(--warn); }
.rx-info p.plain { background: none; padding: 0; color: var(--muted); }

.rx-test { display: flex; flex-direction: column; min-width: 0; }
.rx-test .pane-head { margin-bottom: 8px; }
.rx-badge { margin-right: auto; font-size: 13px; color: var(--muted); background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-badge); padding: 2px 8px; }
.rx-badge:empty { display: none; }
.rx-badge.has { color: var(--teal-dark); background: var(--ok-tint); border-color: transparent; }
.rx-editor {
  --gw: 2ch; position: relative; height: 260px; min-height: 120px; resize: vertical; overflow: hidden;
  background: var(--code-bg); border: 1px solid var(--border); border-radius: var(--r-ctl);
}
.rx-editor:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.rx-back, .rx-editor textarea {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; border: 0; box-sizing: border-box;
  padding: 10px 12px 10px calc(var(--gw) + 26px); font: 400 14px/1.6 var(--mono); letter-spacing: 0; tab-size: 4;
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; overflow-y: auto; scrollbar-gutter: stable;
}
.rx-back { color: transparent; overflow: hidden; counter-reset: ln; pointer-events: auto; }
.rx-back::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--gw) + 16px); border-right: 1px solid var(--border); background: var(--canvas); }
.rx-back .l { position: relative; min-height: 1.6em; counter-increment: ln; }
.rx-back .l::before {
  content: counter(ln); position: absolute; left: calc(-1 * (var(--gw) + 26px)); width: calc(var(--gw) + 8px); text-align: right;
  color: var(--muted); font-size: 12px; user-select: none;
}
.rx-back.nonum .l::before { content: none; }
.rx-editor textarea { background: transparent; color: var(--ink); resize: none; outline: none; z-index: 1; }
.rx-editor textarea::placeholder { color: var(--muted); }
.rx-back .m { border-radius: 3px; }
.rx-back .a0 { background: rgba(36, 81, 232, .22); }
.rx-back .a1 { background: rgba(24, 203, 185, .34); }
.rx-back .hot { background: rgba(255, 179, 0, .45); box-shadow: 0 0 0 1px #E09A00; }
.rx-back .z { position: relative; }
.rx-back .z::before { content: ""; position: absolute; left: -1px; top: -.05em; height: 1.25em; border-left: 2px solid var(--blue); }
.rx-back .z.hot::before { border-left-color: #E09A00; }
.rx-back .g1 { box-shadow: inset 0 -3px 0 #C2185B; }
.rx-back .g2 { box-shadow: inset 0 -3px 0 #0B7A55; }
.rx-back .g3 { box-shadow: inset 0 -3px 0 #9C27B0; }
.rx-back .g0 { box-shadow: inset 0 -3px 0 #B4530A; }
.rx-tip {
  position: fixed; z-index: 50; max-width: min(420px, 90vw); padding: 6px 10px; font: 400 13px/1.4 var(--mono); color: #fff;
  background: #172033; border-radius: 8px; pointer-events: none; white-space: pre-wrap; overflow-wrap: anywhere;
}
.rx-info { margin-top: 8px; }

.rx-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--border); scrollbar-width: thin; }
.rx-tabs [role="tab"] {
  flex: none; padding: 10px 14px; font: 500 14px var(--font); color: var(--muted); background: none; border: 0;
  border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.rx-tabs [role="tab"][aria-selected="true"] { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }
.rx-tabs [role="tab"]:focus-visible { outline: none; box-shadow: inset var(--focus); }
.rx-panel { min-width: 0; }
.rx-ptools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.rx-ptools > .small { margin-right: auto; }
.rx-field {
  flex: 1 1 240px; min-width: 0; height: 36px; padding: 0 10px; font: 400 14px var(--mono); color: var(--ink);
  background: var(--code-bg); border: 1px solid var(--border); border-radius: 10px;
}
.rx-field:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus); }
.rx-hint { margin: 0 0 8px; }
.rx-out {
  margin: 0; min-height: 80px; max-height: 360px; overflow: auto; padding: 10px 12px; font: 400 14px/1.6 var(--mono);
  background: var(--canvas); border: 1px solid var(--border); border-radius: var(--r-ctl); white-space: pre-wrap; overflow-wrap: anywhere;
}
.rx-out mark { background: rgba(24, 203, 185, .34); color: inherit; border-radius: 3px; }
.rx-tablewrap { max-height: 340px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-ctl); }
.rx-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.rx-table th, .rx-table td { height: 34px; padding: 0 10px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
.rx-table td { font-family: var(--mono); max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.rx-table th { position: sticky; top: 0; background: var(--canvas); font-weight: 600; z-index: 1; }
.rx-table tr.row { cursor: default; }
.rx-table tr.row:hover, .rx-table tr.row.sel { background: var(--blue-tint); }
.rx-table .na { color: var(--muted); }
.rx-table .sp td { height: auto; padding: 0; border: 0; }
.rx-explain { list-style: none; margin: 0; padding: 0; font-size: 14px; max-height: 420px; overflow: auto; }
.rx-explain li { display: flex; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.rx-explain code { flex: none; min-width: 7ch; max-width: 45%; overflow-wrap: anywhere; font-family: var(--mono); color: var(--blue); }
.rx-cheat { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px 24px; }
.rx-cheat h3 { font-size: 15px; margin: 4px 0 6px; }
.rx-cheat table { border-collapse: collapse; width: 100%; font-size: 14px; }
.rx-cheat td { padding: 4px 6px 4px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.rx-cheat td:first-child { white-space: nowrap; width: 1%; }
.rx-tok { font: 500 13px var(--mono); color: var(--blue); background: var(--blue-tint); border: 0; border-radius: 6px; padding: 3px 7px; cursor: pointer; }
.rx-cheat-static code { color: var(--blue); }
.rx-share { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rx-engine { margin: 0; }

@media (max-width: 768px) {
  .rx { padding: 12px; }
  .rx-pat { flex-basis: 100%; }
  .rx-top-actions { width: 100%; }
  .rx-top-actions { flex-wrap: nowrap; }
  .rx-top-actions > * { flex: 1 1 0; min-width: 0; }
  .rx-lib { height: 40px; }
  .rx-flags { flex-wrap: nowrap; gap: 4px; }
  .rx-flag { min-width: 0; height: 44px; flex: 1 1 0; padding: 0; }
  .rx-flaghelp { display: none; }
  .rx-editor { height: 35vh; }
  .rx-tabs [role="tab"] { padding: 12px 12px; }
  .rx-table td { max-width: 160px; }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rx-phl .t-esc { color: #F0A35E; }
  :root:not([data-theme="light"]) .rx-phl .t-cls { color: #5FE0B0; }
  :root:not([data-theme="light"]) .rx-phl .t-qnt { color: #D08CE0; }
  :root:not([data-theme="light"]) .rx-phl .t-anc, :root:not([data-theme="light"]) .rx-phl .t-dot { color: #F48FB1; }
}
  :root[data-theme="dark"] .rx-phl .t-esc { color: #F0A35E; }
  :root[data-theme="dark"] .rx-phl .t-cls { color: #5FE0B0; }
  :root[data-theme="dark"] .rx-phl .t-qnt { color: #D08CE0; }
  :root[data-theme="dark"] .rx-phl .t-anc, :root[data-theme="dark"] .rx-phl .t-dot { color: #F48FB1; }