/* Text Diff Checker, Regex Tester and Cron Expression Explainer. */
.dev-workspace .panel-content { padding: 1rem; gap: 0.6rem; overflow: visible; }
.dev-workspace .rx-label:first-child { margin-top: 0; }

:root { --diff-ins-bg: #dcfce7; --diff-ins-fg: #14532d; --diff-del-bg: #fee2e2; --diff-del-fg: #7f1d1d; --rx-mark: #fde68a; }
[data-theme="dark"] { --diff-ins-bg: rgba(34, 197, 94, 0.2); --diff-ins-fg: #bbf7d0; --diff-del-bg: rgba(239, 68, 68, 0.22); --diff-del-fg: #fecaca; --rx-mark: rgba(250, 204, 21, 0.35); }

.diff-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; flex: 1; min-height: 0; }
.diff-input { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.diff-input .ai-textarea { flex: 1; min-height: 220px; font-family: var(--font-mono); font-size: 0.82rem; }
.diff-swap { align-self: flex-start; margin-top: 0.5rem; }
.diff-summary { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); }
.diff-summary:empty { display: none; }
.diff-summary[data-state="same"] { color: #15803d; }
.diff-result:empty { display: none; }
.diff-result { overflow: auto; max-height: 70vh; border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface-primary); font: 0.82rem/1.55 var(--font-mono); }
.diff-lines { min-width: max-content; }
.diff-row { display: grid; grid-template-columns: 2.6em 2.6em 1.4em 1fr; }
.diff-row.is-ins { background: var(--diff-ins-bg); }
.diff-row.is-del { background: var(--diff-del-bg); }
.diff-ln { padding: 0 0.4rem; text-align: right; color: var(--text-tertiary); user-select: none; border-right: 1px solid var(--hairline); }
.diff-sign { text-align: center; color: var(--text-tertiary); user-select: none; }
.diff-row .diff-ins, .diff-row .diff-del, .diff-same { white-space: pre; padding-right: 1rem; }
.diff-row .diff-ins { color: var(--diff-ins-fg); }
.diff-row .diff-del { color: var(--diff-del-fg); text-decoration: line-through; text-decoration-color: rgba(127, 29, 29, 0.35); }
.diff-text { margin: 0; padding: 0.75rem; white-space: pre-wrap; word-break: break-word; font: inherit; }
.diff-text ins { background: var(--diff-ins-bg); color: var(--diff-ins-fg); text-decoration: none; border-radius: 3px; }
.diff-text del { background: var(--diff-del-bg); color: var(--diff-del-fg); border-radius: 3px; }
.diff-split { width: 100%; border-collapse: collapse; table-layout: fixed; }
.diff-split td { vertical-align: top; padding: 0 0.5rem; white-space: pre-wrap; word-break: break-word; }
.diff-split td.diff-ln { width: 2.8em; }
.diff-split .diff-cell-del { background: var(--diff-del-bg); color: var(--diff-del-fg); }
.diff-split .diff-cell-ins { background: var(--diff-ins-bg); color: var(--diff-ins-fg); }
.diff-split .diff-cell-empty { background: var(--hover-wash); }
.diff-result:not(:empty) ~ .ft-empty { display: none; }

.rx-label { display: block; margin: 0.25rem 0 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.rx-pattern { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.6rem; border: 1px solid var(--hairline-strong); border-radius: 10px; background: var(--surface-primary); font-family: var(--font-mono); color: var(--text-tertiary); }
.rx-pattern:focus-within { box-shadow: var(--ring); border-color: var(--border-focus, #6366f1); }
.rx-pattern input { flex: 1; min-width: 0; padding: 0.65rem 0; border: 0; background: transparent; color: var(--text-primary); font: 0.95rem var(--font-mono); outline: none; }
.rx-flags { width: 6.5em; font-family: var(--font-mono); }
.rx-text { min-height: 160px; font-family: var(--font-mono); font-size: 0.85rem; }
.rx-replace, .cron-input { width: 100%; padding: 0.6rem 0.7rem; border: 1px solid var(--hairline-strong); border-radius: 10px; background: var(--surface-primary); color: var(--text-primary); font: 0.9rem var(--font-mono); }
.cron-input { font-size: 1.15rem; letter-spacing: 0.04em; }
.rx-summary { margin: 0; font-weight: 600; font-size: 0.9rem; color: var(--text-secondary); }
.rx-summary:empty { display: none; }
.rx-summary[data-state="none"] { color: #b45309; }
.rx-highlight { margin: 0; padding: 0.75rem; max-height: 260px; overflow: auto; border: 1px solid var(--hairline); border-radius: 10px; white-space: pre-wrap; word-break: break-word; font: 0.85rem/1.6 var(--font-mono); background: var(--surface-primary); color: var(--text-primary); }
.rx-highlight:empty { display: none; }
.rx-highlight mark { background: var(--rx-mark); color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: inset 0 -2px 0 rgba(180, 83, 9, 0.45); }
.rx-table td { font-family: var(--font-mono); font-size: 0.8rem; word-break: break-word; }
.rx-table tbody:empty, .rx-table:has(tbody:empty) { display: none; }
.rx-replace-out { min-height: 80px; font-family: var(--font-mono); font-size: 0.82rem; }
.rx-explain { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.3rem; }
.rx-explain li { display: grid; grid-template-columns: minmax(3.5em, max-content) 1fr; gap: 0.6rem; align-items: baseline; font-size: 0.85rem; }
.rx-explain code { padding: 0.1rem 0.35rem; border-radius: 5px; background: var(--hover-wash); font-family: var(--font-mono); word-break: break-all; }

.cron-presets { flex-wrap: wrap; }
.cron-legend { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; margin-top: 0.5rem; font-size: 0.72rem; line-height: 1.3; text-align: center; color: var(--text-tertiary); }
.cron-legend span { padding: 0.35rem 0.2rem; border: 1px dashed var(--hairline-strong); border-radius: 8px; }
.cron-description { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; color: var(--text-primary); }
.cron-description:empty { display: none; }
#cronFields:has(tbody:empty) { display: none; }
.cron-runs { margin: 0; padding-left: 1.6rem; display: grid; gap: 0.2rem; font: 0.88rem/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }

@media (max-width: 768px) {
    .cron-presets { flex-direction: row; flex-wrap: wrap; }
    .cron-presets .btn-icon { width: auto; flex: 0 0 auto; }
}
@media (max-width: 640px) {
    .dev-workspace .panel-content { padding: 0.75rem; }
    .diff-inputs { grid-template-columns: 1fr; }
    .diff-input .ai-textarea { min-height: 140px; }
    .cron-legend { font-size: 0.65rem; }
}