/* ===== Тема: графит ===== */
:root {
    --bg: #141517;
    --bg-panel: #1d1f22;
    --bg-input: #17191c;
    --border: #2c2f33;
    --border-focus: #5c636e;
    --text: #e2e4e7;
    --text-dim: #94989f;
    --accent: #c9ced6;
    --accent2: #9fb2c8;
    --green: #6fbf8b;
    --red: #d97b7b;
    --radius: 10px;
    --mono: "Cascadia Code", "JetBrains Mono", Consolas, "Courier New", monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(1200px 600px at 70% -10%, #232527 0%, var(--bg) 55%);
    color: var(--text);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    display: flex;
    flex-direction: column;
}

/* ===== Шапка ===== */
.site-header {
    padding: 28px 24px 10px;
    text-align: center;
}
.site-header h1 {
    margin: 0;
    font-size: 26px;
    font-family: var(--mono);
    letter-spacing: -0.5px;
}
.accent { color: var(--accent); }
.accent2 { color: var(--accent2); }
.subtitle {
    margin: 8px 0 0;
    color: var(--text-dim);
    font-size: 14px;
}

/* ===== Раскладка ===== */
.layout {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(360px, 1fr) minmax(420px, 1fr);
    gap: 18px;
    padding: 18px 24px 24px;
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    align-items: start;
    align-content: start;
}
@media (max-width: 960px) {
    .layout { grid-template-columns: 1fr; }
}

.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    min-height: 30px;
}
.panel-header h2 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}

/* ===== Строки docker run ===== */
.run-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.run-row {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-input);
    padding: 10px;
    transition: border-color 0.15s;
}
.run-row:focus-within { border-color: var(--border-focus); }

.run-line {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.run-input {
    flex: 1;
    resize: none;
    overflow: hidden;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    padding: 4px 6px;
    min-height: 44px;
}
.run-input::placeholder { color: rgba(226, 228, 231, 0.25); }

.row-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-start;
}
.btn-row {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-panel);
    color: var(--text-dim);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0 2px;
}
.btn-row:hover:not(:disabled) {
    color: var(--text);
    border-color: var(--border-focus);
}
.btn-plus:hover:not(:disabled) { color: var(--green); border-color: var(--green); }
.btn-minus:hover:not(:disabled) { color: var(--red); border-color: var(--red); }
.btn-row:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ===== Опции строки (IP, политика рестарта) ===== */
.run-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-top: 8px;
    padding: 0 6px;
    min-height: 26px;
}
.opt-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--text-dim);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.opt-toggle input {
    accent-color: var(--accent2);
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin: 0;
}
.opt-toggle:hover span { color: var(--text); }

.ip-input {
    width: 150px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    padding: 4px 9px;
    outline: none;
    transition: border-color 0.15s;
}
.ip-input:focus { border-color: var(--border-focus); }
.ip-input.invalid { border-color: var(--red); }

.restart-select {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    padding: 4px 7px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}
.restart-select:focus,
.restart-select:hover { border-color: var(--border-focus); }
.restart-select option { background: var(--bg-panel); }

.hidden { display: none !important; }

/* ===== Кнопки над compose ===== */
.actions { display: flex; gap: 8px; }
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-dim);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.btn-action:hover { color: var(--text); border-color: var(--border-focus); }
.btn-action .icon-done { display: none; }
.btn-action.done {
    color: var(--green);
    border-color: var(--green);
}
.btn-action.done .icon-main { display: none; }
.btn-action.done .icon-done { display: inline; color: var(--green); }

/* ===== Редактор ===== */
.editor-host {
    flex: 1;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    min-height: 300px;
}
.CodeMirror {
    height: auto;
    min-height: 300px;
    background: var(--bg-input);
    color: var(--text);
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.55;
}
.CodeMirror-scroll { min-height: 300px; max-height: calc(100vh - 220px); }
.CodeMirror-gutters {
    background: #101113;
    border-right: 1px solid var(--border);
}
.CodeMirror-linenumber { color: #4b5058; }
.CodeMirror-cursor { border-left: 2px solid var(--accent); }
.CodeMirror-selected { background: rgba(140, 150, 160, 0.18); }
.CodeMirror-focused .CodeMirror-selected { background: rgba(140, 150, 160, 0.28); }
.CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.03); }

/* Подсветка YAML (приглушённые тона под графит) */
.cm-s-default .cm-atom { color: #8ab4d4; }
.cm-s-default .cm-number { color: #d4b475; }
.cm-s-default .cm-keyword { color: #8ab4d4; }
.cm-s-default .cm-def { color: #8ab4d4; }
.cm-s-default .cm-variable-2 { color: #e2e4e7; }
.cm-s-default .cm-string { color: #97c28b; }
.cm-s-default .cm-string-2 { color: #97c28b; }
.cm-s-default .cm-comment { color: #686d75; font-style: italic; }
.cm-s-default .cm-meta { color: #a397b8; }
.cm-s-default .cm-tag { color: #8ab4d4; }
.cm-s-default .cm-qualifier { color: #a397b8; }

/* ===== Подвал ===== */
.site-footer {
    text-align: center;
    padding: 6px 24px 18px;
    color: #5d6269;
    font-size: 12px;
}
.site-footer p { margin: 0; }
.site-footer .sep { margin: 0 4px; }
.site-footer .murrito {
    color: #ffc0cb;
    font-weight: 700;
    text-decoration: none;
}
.site-footer .murrito:hover { text-decoration: underline; }