.regex-page .collections-workspace { min-width: 0; }
.regex-pattern-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.regex-pattern-row label, .regex-generator-form > label { display: grid; gap: 6px; }
.regex-pattern-row label > span, .regex-generator-form label > span, .regex-text-label { color: var(--color-muted); font-size: 11px; font-weight: 700; }
.regex-pattern-row select, .regex-generator-form select, .regex-generator-form input[type="text"], #regex-custom { min-height: 44px; padding: 6px 12px; }
.regex-pattern > div { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; min-height: 44px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-canvas); }
.regex-pattern > div:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.regex-pattern b { padding: 0 11px; color: var(--color-muted); font: 700 16px var(--font-code); }
.regex-pattern input { width: 100%; min-width: 0; padding: 9px 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; font: 13px var(--font-code) !important; }
.regex-engine-note { margin: 7px 0 13px; color: var(--color-muted); font-size: 11px; }
.regex-flags { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 15px; padding: 0; border: 0; }
.regex-flags legend { width: 100%; margin-bottom: 5px; color: var(--color-muted); font-size: 11px; font-weight: 700; }
.regex-flags label, .regex-check { display: flex !important; align-items: center; gap: 7px; color: var(--color-ink); font: 11px var(--font-code); }
.regex-text-label { display: block; margin-bottom: 6px; }
.regex-text { width: 100%; min-height: 190px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-canvas); font: 12px/1.65 var(--font-code); resize: vertical; tab-size: 2; }
.regex-text:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.regex-extraction-input { display: grid; gap: 7px; margin-top: 15px; }.regex-extraction-input > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }.regex-extraction-input label { color: var(--color-muted); font-size: 11px; font-weight: 700; }.regex-extraction-input p { margin: 0; color: var(--color-muted); font-size: 10px; }.regex-extraction-input textarea { width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-control); font: 11px/1.55 var(--font-code); }.regex-extraction-input .CodeMirror { height: 120px; border: 1px solid var(--color-border); border-radius: var(--radius-control); font: 11px/1.55 var(--font-code); }.regex-extraction-input .CodeMirror-focused { border-color: var(--color-accent); }.regex-extraction-output { margin-top: 16px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); }.regex-extraction-output pre { min-height: 90px; margin: 0; padding: 14px; overflow: auto; background: var(--color-surface); }.regex-extraction-output code { font: 11px/1.6 var(--font-code); white-space: pre-wrap; }
.regex-extraction-line-error { background: color-mix(in srgb, var(--color-error) 12%, transparent); }
.regex-test-layout { display: grid; grid-template-columns: minmax(320px, .86fr) minmax(400px, 1.14fr); align-items: start; gap: 18px; }
.regex-test-inputs, .regex-test-results { min-width: 0; }
.regex-test-inputs { position: sticky; top: 16px; }
.regex-result-tabs { margin-bottom: 12px; }
.regex-result-panel { min-width: 0; }
.regex-result-panel > .regex-inspector { border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.regex-debug-grid { display: grid; gap: 16px; }
.regex-debug-grid > section, .regex-details, .regex-generated { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
.regex-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--color-border); }
.regex-section-heading h3, .regex-inspector h3, .regex-details h3 { margin: 0; font-size: 13px; }
.regex-section-heading strong { color: var(--color-muted); font-size: 11px; }
#regex-highlight { min-height: 190px; margin: 0; padding: 15px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.7 var(--font-code); }
#regex-highlight mark { padding: 1px 0; border-radius: 2px; color: var(--color-ink); background: color-mix(in srgb, var(--color-accent) 23%, transparent); box-shadow: inset 0 -1px var(--color-accent); }
#regex-truncated { margin: 0; padding: 10px 14px; border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: 11px; }
.regex-inspector { padding: 14px; }
.regex-inspector h3:not(:first-child) { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--color-border); }
#regex-syntax { min-height: 42px; margin: 9px 0 0; padding: 10px; overflow-x: auto; border-radius: var(--radius-control); background: var(--color-surface); font: 12px/1.7 var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere; }
.regex-token--group { color: #7454a6; }.regex-token--class { color: #087a72; }.regex-token--quantifier { color: #a04d17; }.regex-token--anchor { color: #b62951; }.regex-token--escape { color: #1768a6; }.regex-token--operator { color: #7a5b00; }
#regex-explanation, #regex-suggestions { display: grid; gap: 7px; margin: 9px 0 0; padding-left: 19px; color: var(--color-muted); font-size: 11px; line-height: 1.5; }
.regex-breakdown { display: grid; margin-top: 9px; border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.regex-breakdown > div { display: grid; grid-template-columns: minmax(120px, .45fr) minmax(0, 1fr); align-items: start; gap: 12px; padding: 9px 10px; border-bottom: 1px solid var(--color-border); }
.regex-breakdown > div:last-child { border-bottom: 0; }.regex-breakdown__token { justify-self: start; max-width: 100%; padding: 4px 7px; border: 1px solid transparent; border-radius: 5px; font: 700 11px/1.45 var(--font-code); overflow-wrap: anywhere; }.regex-breakdown__token--anchor { color: oklch(43% .19 306); background: oklch(95% .035 306); border-color: oklch(89% .075 306); }.regex-breakdown__token--group { color: oklch(42% .16 256); background: oklch(94% .035 256); border-color: oklch(87% .075 256); }.regex-breakdown__token--class { color: oklch(43% .13 55); background: oklch(94% .055 75); border-color: oklch(86% .09 75); }.regex-breakdown__token--quantifier { color: oklch(40% .12 155); background: oklch(94% .045 155); border-color: oklch(86% .075 155); }.regex-breakdown__token--escape { color: oklch(42% .14 225); background: oklch(94% .035 225); border-color: oklch(87% .07 225); }.regex-breakdown__token--operator { color: oklch(42% .12 20); background: oklch(95% .035 20); border-color: oklch(88% .07 20); }.regex-breakdown__token--literal { color: var(--color-ink); background: var(--color-surface); border-color: var(--color-border); }.regex-breakdown span { color: var(--color-muted); font-size: 11px; line-height: 1.45; }
.regex-details { margin-top: 16px; overflow: hidden; }.regex-details > h3 { padding: 13px 14px; border-bottom: 1px solid var(--color-border); }
.regex-table-wrap { overflow-x: auto; }.regex-details table { width: 100%; border-collapse: collapse; font-size: 11px; }.regex-details th, .regex-details td { padding: 9px 12px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }.regex-details th { color: var(--color-muted); background: var(--color-surface); font-size: 10px; }.regex-details td code { font-family: var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere; }.regex-details tbody tr:last-child td { border-bottom: 0; }
.regex-generator-form { display: grid; gap: 14px; padding: 8px 0 18px; }.regex-template-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }.regex-template-fieldset legend { margin-bottom: 10px; color: var(--color-muted); font-size: 11px; font-weight: 700; }.regex-template-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.regex-template-grid label { min-width: 0; cursor: pointer; }.regex-template-grid input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }.regex-template-card { height: 100%; min-height: 310px; display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-ink); background: var(--color-canvas); transition: border-color 160ms ease, background-color 160ms ease; }.regex-template-card__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.regex-template-card__heading strong { font-size: 14px; }.regex-template-card__heading small { flex: 0 0 auto; padding: 4px 7px; border-radius: 4px; color: var(--color-muted); background: var(--color-surface); font-size: 10px; font-weight: 600; }.regex-template-card__description { min-height: 40px; margin-top: 10px; color: var(--color-muted); font-size: 12px; font-weight: 400; line-height: 1.55; }.regex-template-card__label { margin-top: 12px; color: var(--color-muted); font-size: 11px; font-weight: 600; }.regex-template-card > code { display: block; min-height: 54px; margin-top: 5px; padding: 9px 10px; overflow: auto; border-radius: 5px; color: var(--color-ink); background: var(--color-surface); font: 11px/1.5 var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere; }.regex-template-card__examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: auto; padding-top: 13px; }.regex-template-card__example { min-width: 0; display: grid; align-content: start; gap: 4px; }.regex-template-card__example b { font-size: 11px; }.regex-template-card__example code { color: var(--color-ink); font: 10px/1.45 var(--font-code); overflow-wrap: anywhere; }.regex-template-card__example--match b { color: var(--color-accent); }.regex-template-card__example--no-match b { color: var(--color-error); }.regex-template-card__actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 14px; }.regex-template-card__actions .button { min-height: 38px; }.regex-template-grid label:hover .regex-template-card { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); }.regex-template-grid input:focus-visible + .regex-template-card { outline: 2px solid var(--color-focus); outline-offset: 2px; }.regex-template-grid input:checked + .regex-template-card { border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 3%, var(--color-canvas)); }.regex-generator-options { display: flex; flex-wrap: wrap; gap: 18px; }.regex-check { min-height: 32px; }
.regex-generated pre { min-height: 120px; margin: 0; padding: 18px; overflow: auto; background: var(--color-surface); font: 13px/1.7 var(--font-code); white-space: pre-wrap; overflow-wrap: anywhere; }.regex-section-heading > div { display: flex; gap: 8px; }.regex-generated .inline-status { min-height: 20px; margin: 8px 14px; }
.regex-template-card__actions .regex-template-card__try { border-color: #15803d; color: #ffffff; background: #15803d; }.regex-template-card__actions .regex-template-card__try:hover { border-color: #166534; color: #ffffff; background: #166534; }.regex-template-card__actions .regex-template-card__try:active { border-color: #14532d; background: #14532d; }
.regex-template-grid .regex-template-card { box-shadow: 0 2px 7px rgb(15 23 42 / .08); transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }.regex-template-grid label:hover .regex-template-card { box-shadow: 0 5px 14px rgb(15 23 42 / .12); }.regex-template-grid input:checked + .regex-template-card { box-shadow: 0 4px 12px rgb(21 128 61 / .14); }
.regex-template-card__selector { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 10px; }.regex-template-card__selector b { color: var(--color-muted); font-size: 11px; }.regex-template-card__selector select { width: 100%; min-height: 36px; padding: 6px 12px; }
.regex-code-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }.regex-code-toolbar > div { display: flex; flex-wrap: wrap; gap: 10px; }.regex-code-toolbar label { display: grid; gap: 6px; }.regex-code-toolbar label span { color: var(--color-muted); font-size: 11px; font-weight: 700; }.regex-code-toolbar select { min-width: 170px; min-height: 42px; padding: 6px 12px; }.regex-code-output { width: 100%; min-height: 320px; padding: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); font: 12px/1.7 var(--font-code); resize: vertical; }#regex-code-panel .CodeMirror { height: 320px; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-ink); font: 12px/1.7 var(--font-code); }#regex-code-panel .CodeMirror-gutters { border-right-color: var(--color-border); background: var(--color-canvas); }#regex-code-panel .CodeMirror-linenumber { color: var(--color-muted); }#regex-code-panel .CodeMirror-scroll { min-height: 0; }.regex-code-status { min-height: 20px; margin: 8px 0 0; }
.regex-code-toolbar .button.is-copied { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-canvas)); }
.regex-cheat-intro { max-width: 70ch; margin: 4px 0 18px; color: var(--color-muted); font-size: 12px; line-height: 1.6; }
.regex-cheat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; }
.regex-cheat-grid section { min-width: 0; padding: 16px; }.regex-cheat-grid section:nth-child(odd) { border-right: 1px solid var(--color-border); }.regex-cheat-grid section:nth-child(-n+2) { border-bottom: 1px solid var(--color-border); }
.regex-cheat-grid h3 { margin: 0 0 11px; font-size: 13px; }.regex-cheat-grid dl { display: grid; margin: 0; }.regex-cheat-grid dl > div { display: grid; grid-template-columns: minmax(120px, .42fr) minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--color-border); }.regex-cheat-grid dl > div:last-child { border-bottom: 0; }.regex-cheat-grid dt, .regex-cheat-grid dd { margin: 0; }.regex-cheat-grid dt { display: flex; flex-wrap: wrap; gap: 5px; }.regex-cheat-grid code { color: var(--color-accent); font: 700 11px var(--font-code); }.regex-cheat-grid dd { color: var(--color-muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 1050px) { .regex-test-layout { grid-template-columns: 1fr; } .regex-test-inputs { position: static; } }
@media (max-width: 720px) { .regex-cheat-grid { grid-template-columns: 1fr; } .regex-cheat-grid section:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--color-border); } .regex-cheat-grid section:last-child { border-bottom: 0; } }
@media (max-width: 760px) { .regex-template-grid { grid-template-columns: 1fr; } }
@media (max-width: 620px) { .regex-pattern-row { grid-template-columns: 1fr; } .regex-template-card__examples { grid-template-columns: 1fr; } .regex-section-heading, .regex-code-toolbar { align-items: stretch; flex-direction: column; } .regex-section-heading > div { display: grid; } .regex-code-toolbar select, .regex-code-toolbar .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .regex-page * { scroll-behavior: auto !important; transition-duration: .01ms !important; } }