/* =============================
   Secret Masker Tool Styles
   ============================= */
.secret-masker-page .workspace-grid {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    grid-template-areas:
        "options output"
        "input output";
}

.mask-options-card {
    grid-area: options;
}

.mask-input {
    grid-area: input;
}

.mask-output {
    grid-area: output;
}

@media (max-width: 920px) {
    .secret-masker-page .workspace-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "options"
            "input"
            "output";
    }
}

.secret-masker-page textarea {
    min-height: 240px;
}

.mask-options {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

.mask-options .option-title {
    margin: 0 0 var(--space-2);
    font-size: var(--font-sm);
    color: var(--color-text-soft);
}

.mask-options .option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.mask-options .option-label {
    font-size: var(--font-sm);
    color: var(--color-text-soft);
}

.option-chip.inline {
    margin-left: auto;
}

.mask-options select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    padding: 4px 8px;
    font: inherit;
}

.findings {
    border-top: 1px dashed var(--color-border);
    padding-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.findings-title {
    margin: 0;
    font-size: var(--font-sm);
    color: var(--color-text-soft);
}

.findings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.finding-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: var(--font-sm);
    color: var(--color-text-soft);
}

.finding-item strong {
    color: var(--color-text);
}