/* Lab tools — extracted from inline styles for CSP/cache hygiene */

/* Diff */
.diff-added { background-color: rgba(46, 204, 113, 0.2); color: #27ae60; }
.diff-removed { background-color: rgba(231, 76, 60, 0.2); color: #c0392b; text-decoration: line-through; }

/* Nginx config toolbox */
.nginx-add { padding: 0.4rem 0.75rem; font-size: 0.85rem; background: var(--surface-color); color: var(--text-color); border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer; }
.nginx-add:hover { border-color: var(--accent-color); color: var(--accent-color); }

/* Case converter */
.case-btn {
    padding: 0.5rem 1rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}
.case-btn:hover {
    background: var(--border-color);
}

/* Random string */
@media (max-width: 768px) {
    .random-string-grid { grid-template-columns: 1fr !important; }
}

/* Playground CodeMirror */
#editor-wrap .CodeMirror {
    height: 250px;
    width: 100%;
    box-sizing: border-box;
    background: var(--code-bg);
    color: var(--text-color);
    font-family: var(--font-mono);
    font-size: 0.9rem;
    line-height: 1.5;
}
#editor-wrap .CodeMirror-gutters {
    background: var(--code-bg);
    border-right: 1px solid var(--border-color);
}
#editor-wrap .CodeMirror-linenumber { color: var(--secondary-text); }
#editor-wrap .CodeMirror-cursor { border-left-color: var(--text-color); }
#editor-wrap .CodeMirror-selected { background: rgba(128,128,128,0.25); }
#editor-wrap .cm-keyword { color: #c678dd; }
#editor-wrap .cm-def { color: #61afef; }
#editor-wrap .cm-variable { color: var(--text-color); }
#editor-wrap .cm-variable-2 { color: #e06c75; }
#editor-wrap .cm-string { color: #98c379; }
#editor-wrap .cm-string-2 { color: #98c379; }
#editor-wrap .cm-number { color: #d19a66; }
#editor-wrap .cm-atom { color: #d19a66; }
#editor-wrap .cm-comment { color: #5c6370; font-style: italic; }
#editor-wrap .cm-operator { color: #56b6c2; }
#editor-wrap .cm-meta { color: #56b6c2; }
#editor-wrap .cm-property { color: #e06c75; }
#editor-wrap .cm-builtin { color: #e5c07b; }
#editor-wrap .cm-tag { color: #e06c75; }
#editor-wrap .cm-attribute { color: #d19a66; }
#editor-wrap .cm-type { color: #e5c07b; }