.regex{display: grid;gap: 14px;padding-bottom: 40px}.regex__panel{padding: 16px 18px 18px}.regex__title{margin: 0 0 8px;font-size: 15px;font-weight: 700;color: var(--c-text)}.regex__sub{margin: 14px 0 8px;font-size: 13px;font-weight: 700;color: var(--c-text)}.regex__lead{margin: 0 0 12px;font-size: 12.5px;line-height: 1.8;color: var(--c-muted)}.regex__lead strong{color: var(--c-text)}.regex__note,.regex__hint{margin: 10px 0 0;font-size: 12px;line-height: 1.8;color: var(--c-muted)}.regex__note.is-ok{color: var(--c-ok)}.regex__note.is-bad{color: var(--c-err)}.regex__panel--note{background: var(--c-panel-alt)}.regex__tpls{display: grid;grid-template-columns: repeat(auto-fill,minmax(158px,1fr));gap: 8px}.regex__tpl{display: grid;gap: 3px;padding: 9px 11px;min-height: 52px;text-align: left;border: 1px solid var(--c-border);border-radius: 10px;background: var(--c-panel);color: var(--c-text);cursor: pointer;transition: border-color 0.15s ease,background 0.15s ease,transform 0.15s ease}.regex__tpl:hover{border-color: var(--c-accent);transform: translateY(-1px)}.regex__tpl.is-on{border-color: var(--c-accent);background: color-mix(in srgb,var(--c-accent) 12%,var(--c-panel));box-shadow: inset 0 0 0 1px var(--c-accent)}.regex__tpl-name{font-size: 13px;font-weight: 700}.regex__tpl-tag{font-size: 11.5px;color: var(--c-muted)}.regex__tpl.is-on .regex__tpl-tag{color: var(--c-text)}.regex__params{display: flex;flex-wrap: wrap;gap: 10px;margin-top: 12px;padding: 10px 12px;border-radius: 10px;background: var(--c-panel-alt)}.regex__params[hidden]{display: none}.regex__param{display: grid;gap: 4px}.regex__param-label{font-size: 12px;color: var(--c-muted)}.regex__param-input{width: 108px;padding: 7px 9px;border: 1px solid var(--c-border);border-radius: 8px;background: var(--c-panel);color: var(--c-text);font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 13px}.regex__param-input:focus{outline: none;border-color: var(--c-accent)}.regex__field{display: grid;gap: 6px}.regex__label{font-size: 12px;font-weight: 700;letter-spacing: 0.02em;color: var(--c-muted)}.regex__pattern,.regex__ta{width: 100%;padding: 9px 11px;border: 1px solid var(--c-border);border-radius: 10px;background: var(--c-panel);color: var(--c-text);font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 13px;line-height: 1.7;resize: vertical}.regex__pattern{font-size: 14px}.regex__ta--tall{min-height: 132px}.regex__pattern:focus,.regex__ta:focus{outline: none;border-color: var(--c-accent);box-shadow: 0 0 0 3px color-mix(in srgb,var(--c-accent) 18%,transparent)}.regex__form-line{display: flex;flex-wrap: wrap;align-items: center;gap: 8px 12px;margin-top: 10px}.regex__form{flex: 1 1 auto;min-width: 0;padding: 6px 10px;border-radius: 8px;background: var(--c-panel-alt);color: var(--c-accent);font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 12.5px;word-break: break-all}.regex__copy-row{display: flex;flex-wrap: wrap;gap: 8px}.regex__copy-row .btn{min-height: 34px}.regex__copy-row .btn.is-done{border-color: var(--c-ok);color: var(--c-ok)}.regex__error{margin: 10px 0 0;padding: 8px 11px;border-radius: 9px;background: color-mix(in srgb,var(--c-err) 12%,transparent);color: var(--c-err);font-size: 12.5px;line-height: 1.7}.regex__error[hidden]{display: none}.regex__flags{display: grid;grid-template-columns: repeat(auto-fill,minmax(228px,1fr));gap: 6px}.regex__flag{display: grid;grid-template-columns: 18px 30px minmax(0,1fr);align-items: center;gap: 8px;padding: 7px 10px;min-height: 40px;border: 1px solid var(--c-border);border-radius: 9px;background: var(--c-panel);cursor: pointer}.regex__flag:hover{border-color: var(--c-accent)}.regex__flag input{width: 16px;height: 16px;accent-color: var(--c-accent);cursor: pointer;margin: 0}.regex__flag-name{font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 13px;font-weight: 700;color: var(--c-accent)}.regex__flag-hint{font-size: 11.5px;line-height: 1.5;color: var(--c-muted)}.regex__tokens{display: grid;gap: 4px;margin: 0;padding: 0;list-style: none}.regex__token{display: grid;grid-template-columns: minmax(0,auto) minmax(0,1fr) 26px;align-items: baseline;gap: 10px;padding: 5px 10px;border-radius: 8px;background: var(--c-panel-alt)}.regex__token-src{font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 12.5px;font-weight: 700;color: var(--c-accent);word-break: break-all;white-space: pre-wrap}.regex__token-desc{font-size: 12.5px;line-height: 1.7;color: var(--c-text)}.regex__token-no{justify-self: end;font-size: 11px;color: var(--c-muted);font-variant-numeric: tabular-nums}.regex__samples{display: grid;gap: 4px;margin: 0;padding: 0;list-style: none}.regex__sample{display: grid;grid-template-columns: minmax(0,1fr) auto;align-items: baseline;gap: 10px;padding: 5px 10px;border-radius: 8px;border: 1px solid transparent;background: var(--c-panel-alt)}.regex__sample.is-ok{border-color: color-mix(in srgb,var(--c-ok) 45%,transparent)}.regex__sample.is-bad{border-color: color-mix(in srgb,var(--c-err) 55%,transparent)}.regex__sample-text{font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 12.5px;color: var(--c-text);word-break: break-all}.regex__sample-badge{font-size: 11.5px;font-weight: 700;white-space: nowrap;color: var(--c-muted)}.regex__sample.is-ok .regex__sample-badge{color: var(--c-ok)}.regex__sample.is-bad .regex__sample-badge{color: var(--c-err)}.regex__rev-grid{display: grid;grid-template-columns: 1fr 1fr;gap: 12px}.regex__actions{display: flex;flex-wrap: wrap;gap: 8px;margin-top: 10px}.regex__actions .btn{min-height: 36px}.regex__cands{display: grid;gap: 8px;margin-top: 12px}.regex__cand{padding: 10px 12px 11px;border: 1px solid var(--c-border);border-radius: 11px;background: var(--c-panel)}.regex__cand.is-green{border-color: color-mix(in srgb,var(--c-ok) 55%,transparent)}.regex__cand.is-red{border-color: color-mix(in srgb,var(--c-err) 45%,transparent)}.regex__cand-head{display: flex;flex-wrap: wrap;align-items: baseline;gap: 6px 10px;margin-bottom: 6px}.regex__cand-pattern{flex: 1 1 auto;min-width: 0;font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 13px;color: var(--c-accent);word-break: break-all}.regex__cand-badge{flex: none;padding: 2px 8px;border-radius: 999px;font-size: 11.5px;font-weight: 700;background: color-mix(in srgb,var(--c-ok) 16%,transparent);color: var(--c-ok)}.regex__cand.is-red .regex__cand-badge{background: color-mix(in srgb,var(--c-err) 14%,transparent);color: var(--c-err)}.regex__cand-why{margin: 0 0 6px;font-size: 12px;line-height: 1.7;color: var(--c-muted)}.regex__cand-pass{display: flex;flex-wrap: wrap;align-items: center;gap: 4px 10px;margin: 0;font-size: 12px;color: var(--c-muted)}.regex__cand-pass b{color: var(--c-text);font-variant-numeric: tabular-nums}.regex__cand-use{margin-left: auto;padding: 6px 11px;min-height: 34px;border: 1px solid var(--c-border);border-radius: 8px;background: var(--c-panel);color: var(--c-text);font-size: 12px;cursor: pointer}.regex__cand-use:hover{border-color: var(--c-accent);color: var(--c-accent)}.regex__guard{margin: 10px 0 0;padding: 9px 11px;border-radius: 9px;background: color-mix(in srgb,var(--c-warn,#f59e0b) 14%,transparent);color: var(--c-text);font-size: 12.5px;line-height: 1.75}.regex__guard[hidden]{display: none}.regex__stats{margin-top: 10px;font-size: 12.5px;color: var(--c-muted);font-variant-numeric: tabular-nums;word-break: break-word}.regex__highlight{margin-top: 8px;max-height: 320px;overflow: auto;padding: 10px 12px;border: 1px solid var(--c-border);border-radius: 10px;background: var(--c-panel-alt);font-family: var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size: 12.5px;line-height: 1.8;color: var(--c-text);white-space: pre-wrap;word-break: break-word}.regex__mark{padding: 0 1px;border-radius: 3px;background: color-mix(in srgb,var(--c-accent) 30%,transparent);color: var(--c-text);box-shadow: inset 0 -1px 0 var(--c-accent)}.regex__placeholder{margin: 0;color: var(--c-muted)}@media (max-width: 720px){.regex__panel{padding: 13px 12px 14px}.regex__tpls{grid-template-columns: 1fr 1fr;gap: 7px}.regex__tpl{min-height: 56px;padding: 8px 10px}.regex__rev-grid{grid-template-columns: 1fr;gap: 10px}.regex__flags{grid-template-columns: 1fr}.regex__flag{grid-template-columns: 18px 30px minmax(0,1fr)}.regex__token{grid-template-columns: minmax(0,1fr) 22px;grid-template-areas: 'src no' 'desc desc';gap: 2px 8px}.regex__token-src{grid-area: src}.regex__token-no{grid-area: no}.regex__token-desc{grid-area: desc}.regex__sample{grid-template-columns: minmax(0,1fr);gap: 2px}.regex__sample-badge{white-space: normal}.regex__copy-row{width: 100%}.regex__copy-row .btn{flex: 1 1 auto;min-height: 40px}.regex__actions .btn{min-height: 40px}.regex__cand-use{margin-left: 0;min-height: 40px;padding: 8px 12px}.regex__form{flex-basis: 100%}.regex__highlight{max-height: 260px}}