/* 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 builder */
.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); }

.nginx-builder { display: grid; gap: 1rem; }
.nginx-field { display: grid; gap: 0.25rem; }
.nginx-field > label { font-weight: 600; font-size: 0.85rem; }
.nginx-field > .form-input { width: 100%; box-sizing: border-box; }
.nginx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem; }
.nginx-row > .nginx-field { min-width: 0; }
.nginx-checkrow { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; }
.nginx-check { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; cursor: pointer; }
.nginx-check input { accent-color: var(--accent-color); }

.nginx-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-color);
}
.nginx-section > summary {
    list-style: none;
    cursor: pointer;
    padding: 0.6rem 0.85rem;
    font-weight: 600;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.nginx-section > summary::-webkit-details-marker { display: none; }
.nginx-section > summary::after {
    content: "+";
    color: var(--secondary-text);
    font-size: 1rem;
    transition: transform 0.15s;
}
.nginx-section[open] > summary::after { content: "\2212"; }
.nginx-section > summary:hover { color: var(--accent-color); }
.nginx-section-body { padding: 0.85rem; display: grid; gap: 0.85rem; }

.nginx-template-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.nginx-template {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    background: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.nginx-template:hover { border-color: var(--accent-color); color: var(--accent-color); }
.nginx-template.is-active { border-color: var(--accent-color); color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); }

.nginx-loc {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.75rem;
    display: grid;
    gap: 0.6rem;
    background: var(--bg-color);
}
.nginx-loc-head { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
.nginx-loc-head strong { font-size: 0.85rem; color: var(--secondary-text); font-family: var(--font-mono); }
.nginx-loc-remove {
    padding: 0.2rem 0.55rem; font-size: 0.8rem; line-height: 1.4;
    background: transparent; color: var(--danger-color);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm); cursor: pointer;
}
.nginx-loc-remove:hover { border-color: var(--danger-color); }

.nginx-warn {
    padding: 0.6rem 0.85rem; border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--danger-color) 12%, transparent);
    color: var(--danger-color); font-size: 0.85rem;
}
.nginx-warn ul { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.nginx-warn:empty { display: none; }

.nginx-output-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.nginx-output-bar .lab-tool-textarea { margin-top: 0.5rem; }


/* 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; }