/* Стили CSS-страниц: css-formatter, css-minifier, px-to-rem (вкладка CSS).
   Подключается в {% block head %} шаблонов этих инструментов. Общие файлы сайта не меняются. */
:root {
  --c-str: #0B7A3B; --c-num: #1D4ED8; --c-atom: #7C3AED; --c-kw: #9A3412; --c-prop: #9A3412;
  --c-sel: #172033; --c-fn: #0E7490; --c-comment: #5D687B; --c-punct: #5D687B; --c-selbg: #E3EBFF;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --c-str: #7EE2A8; --c-num: #9DB7FF; --c-atom: #C9AEFF; --c-kw: #F5B98A; --c-prop: #F5B98A; --c-sel: #E8ECF4; --c-fn: #67E8F9; --c-comment: #A3ADBF; --c-punct: #A3ADBF; --c-selbg: #1F2E5C; }
}
  :root[data-theme="dark"] { --c-str: #7EE2A8; --c-num: #9DB7FF; --c-atom: #C9AEFF; --c-kw: #F5B98A; --c-prop: #F5B98A; --c-sel: #E8ECF4; --c-fn: #67E8F9; --c-comment: #A3ADBF; --c-punct: #A3ADBF; --c-selbg: #1F2E5C; }
.tool .cm-wrap { flex: 1; min-height: 320px; height: 440px; border: 1px solid var(--border); border-radius: var(--r-ctl); overflow: hidden; background: var(--code-bg); display: flex; }
.tool .cm-wrap.readonly { background: var(--canvas); }
.tool .cm-wrap:focus-within { border-color: var(--blue); box-shadow: var(--focus); }
.tool .cm-wrap .cm-editor { flex: 1; min-width: 0; height: 100%; font: 400 14px/1.6 var(--mono); }
.tool .cm-wrap .cm-editor.cm-focused { outline: none; }
.tool .cm-wrap .cm-scroller { font-family: var(--mono); line-height: 1.6; }
.tool .cm-wrap .cm-content { caret-color: var(--ink); color: var(--ink); padding: 8px 0; }
.tool .cm-wrap .cm-gutters { background: transparent; border-right: 1px solid var(--border); color: var(--muted); }
.tool .cm-wrap .cm-activeLine { background: rgba(36, 81, 232, .05); }
.tool .cm-wrap .cm-activeLineGutter { background: rgba(36, 81, 232, .08); }
.tool .cm-wrap .cm-selectionBackground, .tool .cm-wrap .cm-focused .cm-selectionBackground { background: var(--c-selbg) !important; }
.tool .cm-wrap .cm-cursor { border-left-color: var(--ink); }
.tool .cm-wrap .cm-placeholder { color: var(--muted); }
.tool .cm-wrap .cm-matchingBracket { background: rgba(24, 203, 185, .25); outline: none; }
.tool .cm-wrap .cm-err-line { background: var(--danger-tint) !important; }
.tool textarea.io { height: 440px; }
.tool .pane.css-drop { outline: 2px dashed var(--teal); outline-offset: -6px; }
.tool.css-busy .pane-title::after { content: " · working…"; color: var(--muted); font-weight: 400; }
.css-actions { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.css-run[hidden] { display: none; }
.css-more { font-size: 14px; }
.css-more > summary { cursor: pointer; color: var(--muted); list-style: revert; }
.css-more-body { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
@media (min-width: 769px) {
  .css-more > summary { display: none; }
  .css-more { display: inline-flex; }
}
@media (max-width: 768px) {
  .tool .cm-wrap { height: 300px; min-height: 220px; }
  .css-more { width: 100%; }
  .css-more-body { margin-top: 10px; display: flex; }
  .css-actions { margin-left: 0; }
}