.regex-tool-page { background: radial-gradient(circle at 43% 8%, rgba(105, 61, 226, .21), transparent 29%), radial-gradient(circle at 88% 45%, rgba(41, 114, 206, .14), transparent 30%), linear-gradient(180deg, #020615, #04091a 72%, #071027); }
.regex-page-icon { color: #a985ff; border-color: rgba(146, 101, 242, .44); background: linear-gradient(145deg, rgba(112, 62, 222, .28), rgba(34, 47, 111, .48)); box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 0 38px rgba(116, 72, 226, .17); }
.regex-page-icon .standard-tool-icon-svg { width: 39px; height: 39px; }
.regex-page-hero .eyebrow { color: #a985ff; }
.regex-workspace { overflow: hidden; border: 1px solid rgba(105, 117, 169, .27); border-radius: 18px; background: linear-gradient(145deg, rgba(16, 27, 53, .97), rgba(6, 13, 32, .98)); box-shadow: 0 26px 75px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025); }
.regex-pattern-panel { padding: 22px 23px 20px; border-bottom: 1px solid rgba(101, 115, 161, .17); background: rgba(7, 15, 35, .62); }
.regex-section-heading { min-height: 38px; margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 13px; }
.regex-section-heading > div:first-child { display: flex; align-items: flex-start; gap: 10px; }
.regex-section-heading > div:first-child > span { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; color: #b092ff; border: 1px solid rgba(143, 103, 237, .31); border-radius: 8px; background: rgba(92, 60, 192, .14); font-size: 9px; font-weight: 800; }
.regex-section-heading h3, .regex-results-heading h3 { margin: 1px 0 0; font-size: 13px; }
.regex-section-heading p, .regex-results-heading p { margin: 4px 0 0; color: #747e97; font-size: 9px; }
.regex-heading-actions { display: flex; gap: 7px; }
.regex-heading-actions button { height: 31px; padding: 0 11px; color: #a8b0c8; border: 1px solid rgba(105, 120, 169, .3); border-radius: 7px; background: rgba(14, 26, 52, .78); font-size: 9px; font-weight: 700; cursor: pointer; }
.regex-heading-actions button:hover { color: white; border-color: rgba(151, 113, 243, .58); }
.regex-preset-picker { margin-bottom: 13px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; }
.regex-preset-picker > span { color: #b8bfd2; font-size: 10px; font-weight: 700; white-space: nowrap; }
.regex-preset-picker select { width: 100%; min-width: 0; height: 42px; padding: 0 36px 0 12px; color: #e8eaf3; border: 1px solid #35415f; border-radius: 9px; outline: 0; background: #091228; font-size: 10px; cursor: pointer; }
.regex-preset-picker select:focus { border-color: #936ff0; box-shadow: 0 0 0 3px rgba(126, 82, 224, .11); }
.regex-pattern-shell { min-height: 51px; padding: 5px 6px 5px 13px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 7px; color: #a98bfa; border: 1px solid #35415f; border-radius: 10px; background: #071025; font: 600 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.regex-pattern-shell:focus-within { border-color: #936ff0; box-shadow: 0 0 0 3px rgba(126, 82, 224, .11); }
.regex-pattern-shell.has-error { border-color: rgba(255, 93, 124, .72); box-shadow: 0 0 0 3px rgba(225, 65, 99, .1); }
.regex-pattern-shell input { width: 100%; min-width: 0; height: 39px; padding: 0; color: #f1f2fa; border: 0; outline: 0; background: transparent; font: inherit; }
.regex-pattern-shell input::placeholder { color: #59647b; }
.regex-pattern-shell button { height: 37px; padding: 0 13px; color: #d8ceff; border: 1px solid rgba(141, 102, 237, .38); border-radius: 8px; background: rgba(94, 57, 196, .14); font-size: 9px; font-weight: 750; cursor: pointer; }
.regex-pattern-shell button:hover:not(:disabled) { color: white; border-color: #a17df8; }
.regex-pattern-shell button:disabled { opacity: .4; cursor: default; }
.regex-flags { margin-top: 13px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.regex-flags label { min-width: 0; min-height: 53px; padding: 8px 10px; display: grid; grid-template-columns: 25px minmax(0, 1fr); align-items: center; gap: 8px; color: #8d96ad; border: 1px solid rgba(103, 117, 162, .22); border-radius: 9px; background: rgba(8, 17, 38, .62); cursor: pointer; transition: border-color .18s ease, background .18s ease; }
.regex-flags label:hover, .regex-flags label.is-active { color: white; border-color: rgba(146, 106, 241, .5); background: rgba(82, 56, 176, .15); }
.regex-flags input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.regex-flags code { width: 25px; height: 25px; display: grid; place-items: center; color: #9e7ff3; border: 1px solid rgba(136, 99, 229, .28); border-radius: 6px; background: rgba(91, 56, 184, .12); font: 750 11px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.regex-flags label.is-active code { color: white; border-color: transparent; background: linear-gradient(135deg, #8a56e8, #5374e9); box-shadow: 0 5px 14px rgba(83, 77, 207, .22); }
.regex-flags label > span { min-width: 0; display: grid; gap: 3px; }
.regex-flags strong { overflow: hidden; color: inherit; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.regex-flags small { overflow: hidden; color: #68738c; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.regex-test-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.regex-text-panel, .regex-preview-panel { min-width: 0; padding: 23px; }
.regex-text-panel { border-right: 1px solid rgba(101, 114, 159, .17); }
.regex-preview-panel { background: rgba(4, 11, 28, .34); }
.regex-text-panel textarea, .regex-highlight-preview { width: 100%; min-height: 230px; padding: 15px; overflow: auto; color: #dfe3ef; border: 1px solid #303d5c; border-radius: 10px; background: #071025; font: 400 11px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.regex-text-panel textarea { resize: vertical; outline: 0; }
.regex-text-panel textarea::placeholder { color: #566178; }
.regex-text-panel textarea:focus { border-color: #8c6ee7; box-shadow: 0 0 0 3px rgba(126, 82, 224, .1); }
.regex-highlight-preview mark { padding: 1px 2px; color: #fff; border-radius: 3px; background: linear-gradient(135deg, rgba(158, 79, 232, .85), rgba(56, 126, 234, .84)); box-shadow: 0 0 10px rgba(121, 79, 226, .28); }
.regex-highlight-preview mark.zero-length { width: 2px; height: 16px; padding: 0; display: inline-block; vertical-align: text-bottom; background: #f0bf4f; }
.regex-empty-preview { color: #59647b; }
.regex-match-badge { padding: 5px 9px; color: #8b95ae; border: 1px solid rgba(105, 119, 164, .25); border-radius: 999px; background: rgba(17, 30, 57, .7); font-size: 8px; font-weight: 750; white-space: nowrap; }
.regex-match-badge.has-matches { color: #74e3ad; border-color: rgba(69, 209, 142, .32); background: rgba(39, 154, 103, .1); }
.regex-match-badge.has-error { color: #ff8ba0; border-color: rgba(235, 82, 112, .34); background: rgba(177, 42, 70, .1); }
.regex-results-panel { padding: 21px 23px 23px; border-top: 1px solid rgba(101, 114, 159, .16); background: rgba(6, 14, 32, .5); }
.regex-results-heading { margin-bottom: 13px; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.regex-results-heading > code { max-width: 55%; padding: 6px 9px; overflow: hidden; color: #a78df1; border: 1px solid rgba(126, 97, 208, .24); border-radius: 7px; background: rgba(73, 47, 151, .1); font: 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.regex-match-list { max-height: 330px; display: grid; gap: 8px; overflow-y: auto; }
.regex-match-card { min-width: 0; padding: 10px 12px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 1px solid rgba(98, 113, 157, .2); border-radius: 9px; background: rgba(7, 16, 37, .72); }
.regex-match-number { color: #9e7ff3; font: 750 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.regex-match-value, .regex-match-index { min-width: 0; display: grid; gap: 4px; }
.regex-match-value > span, .regex-match-index > span { color: #6f7890; font-size: 8px; }
.regex-match-value code { overflow: hidden; color: #e6e9f4; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.regex-match-index strong { color: #aab4cd; font: 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.regex-captures { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.regex-captures > span { min-width: 0; padding: 5px 7px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid rgba(108, 123, 169, .2); border-radius: 6px; background: rgba(15, 27, 53, .7); }
.regex-captures small { color: #9b80eb; font-size: 8px; }
.regex-captures code { max-width: 190px; overflow: hidden; color: #c3cadc; font: 9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.regex-results-empty { min-height: 120px; display: grid; place-items: center; align-content: center; gap: 5px; color: #6f7890; border: 1px dashed rgba(105, 119, 163, .23); border-radius: 10px; background: rgba(6, 14, 32, .45); text-align: center; }
.regex-results-empty > span { color: #7f64cd; font: 750 21px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.regex-results-empty strong { color: #aeb5c8; font-size: 11px; }
.regex-results-empty p { max-width: 380px; margin: 0; color: #6d768d; font-size: 9px; line-height: 1.5; }
.regex-results-empty.has-error { border-color: rgba(225, 70, 101, .26); }
.regex-results-empty.has-error > span, .regex-results-empty.has-error p { color: #ff8499; }
.regex-footer { min-height: 47px; padding: 10px 23px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(101, 114, 159, .14); background: rgba(5, 13, 30, .69); }
.regex-footer p { margin: 0; color: #9a88d0; font-size: 9px; }
.regex-footer p.has-error { color: #ff7d91; }
.regex-footer p.has-success { color: #70e3a8; }
.regex-footer > span { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #6f7890; font-size: 8px; }
.regex-footer i { color: #9d7cf2; font-style: normal; }
.regex-information article > span { color: #9d7cf2; font-weight: 750; }
@media (max-width: 800px) { .regex-flags { grid-template-columns: repeat(3, minmax(0, 1fr)); }.regex-test-grid { grid-template-columns: minmax(0, 1fr); }.regex-text-panel { border-right: 0; border-bottom: 1px solid rgba(101, 114, 159, .17); } }
@media (max-width: 560px) { .regex-pattern-panel, .regex-text-panel, .regex-preview-panel, .regex-results-panel { padding: 17px; }.regex-section-heading { align-items: flex-start; }.regex-heading-actions { width: 100%; grid-column: 1 / -1; }.regex-pattern-panel > .regex-section-heading { flex-wrap: wrap; }.regex-heading-actions button { flex: 1; }.regex-preset-picker { grid-template-columns: minmax(0, 1fr); gap: 7px; }.regex-pattern-shell { grid-template-columns: auto minmax(0, 1fr) auto; }.regex-pattern-shell button { width: 100%; grid-column: 1 / -1; }.regex-flags { grid-template-columns: repeat(2, minmax(0, 1fr)); }.regex-flags label:last-child { grid-column: 1 / -1; }.regex-text-panel textarea, .regex-highlight-preview { min-height: 190px; }.regex-results-heading { flex-direction: column; }.regex-results-heading > code { max-width: 100%; }.regex-match-card { grid-template-columns: 28px minmax(0, 1fr); gap: 9px; }.regex-match-index { grid-column: 2; }.regex-captures { grid-column: 2; }.regex-footer { padding: 11px 17px; align-items: flex-start; flex-wrap: wrap; }.regex-footer > span { width: 100%; margin-left: 0; } }