/* ═══════════════════════════════════════
   Knitting Scheme Editor — kse-
   Palette: bg #f9f8f2, accent #0d2d6a, buttons #b1714e
   Font: Montserrat
   ═══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* ── Переменные ── */
:root {
    --kse-bg:        #fffaf7;
    --kse-white:     #ffffff;
    --kse-accent:    #30587c;
    --kse-primary:   #f2886f;
    --kse-border:    #eadbd5;
    --kse-border2:   #cbdfee;
    --kse-muted:     #edf5fb;
    --kse-text:      #183338;
    --kse-text2:     #4f6469;
    --kse-text3:     #6d797b;
    --kse-radius:    8px;
    --kse-shadow:    0 24px 70px rgba(48, 88, 124, .12);
    --kse-font:      'Montserrat', sans-serif;
    --kse-cell:      26px;
    --kse-sidebar:   170px;
}

/* ═══ ОБЁРТКА ═══ */
.kse-wrap {
    display: flex;
    flex-direction: column;
    height: 680px;
    font-family: var(--kse-font);
    background: var(--kse-bg);
    color: var(--kse-text);
    box-sizing: border-box;
    border: 1px solid var(--kse-border);
    border-radius: var(--kse-radius);
    overflow: hidden;
    box-shadow: var(--kse-shadow);
}
.kse-wrap *, .kse-wrap *::before, .kse-wrap *::after {
    box-sizing: border-box;
}

/* Полноэкранный режим */
.kse-fullscreen-page {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow: hidden;
}
.kse-fullscreen-page .kse-wrap {
    height: 100vh;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ═══ ВЕРХНЯЯ ПАНЕЛЬ ═══ */
.kse-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--kse-accent);
    color: #f9f8f2;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.kse-topbar-title {
    font-size: .9em;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #f9f8f2;
    margin-right: 6px;
    white-space: nowrap;
}
.kse-topbar input[type="text"].kse-scheme-name {
    font-family: var(--kse-font);
    font-size: .82em;
    font-weight: 500;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--kse-radius);
    color: #fff;
    padding: 5px 10px;
    width: 200px;
    outline: none;
    transition: background .2s, border-color .2s, box-shadow .2s;
}
.kse-topbar input[type="text"].kse-scheme-name::placeholder { color: rgba(255,255,255,.5); }
.kse-topbar input[type="text"].kse-scheme-name:focus {
    background: rgba(255,255,255,.2);
    border-color: rgba(255,255,255,.5);
}
.kse-topbar input[type="text"].kse-scheme-name.kse-field-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 2px rgba(192,57,43,.18);
}

/* Кнопки топбара */
.kse-topbar-spacer { flex: 1; }
.kse-btn {
    font-family: var(--kse-font);
    font-size: .75em;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--kse-radius);
    border: none;
    cursor: pointer;
    transition: background .2s, opacity .2s;
    white-space: nowrap;
}
.kse-btn-primary   { background: var(--kse-primary); color: #fff; }
.kse-btn-primary:hover { background: #9a613f; }
.kse-btn-secondary { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.kse-btn-secondary:hover { background: rgba(255,255,255,.25); }
.kse-btn-ghost { background: transparent; color: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,.3); }
.kse-btn-ghost:hover { background: rgba(255,255,255,.1); }

/* Кнопки внутри белых модалов (белый фон, не тёмный топбар) */
#kse-desc-result-modal .kse-btn-secondary,
#kse-desc-result-modal .kse-btn-ghost,
#kse-desc-modal .kse-btn-ghost,
#kse-print-modal .kse-btn-secondary,
#kse-print-modal .kse-btn-primary {
    color: #b1714e;
    background: transparent;
    border: 1px solid #b1714e;
}
#kse-desc-result-modal .kse-btn-secondary:hover,
#kse-desc-result-modal .kse-btn-ghost:hover,
#kse-desc-modal .kse-btn-ghost:hover,
#kse-print-modal .kse-btn-secondary:hover,
#kse-print-modal .kse-btn-primary:hover {
    background: #b1714e;
    color: #fff;
}
.kse-btn-xs { font-size: .7em; padding: 4px 10px; }

/* ═══ ИНДИКАТОР ЧЕРНОВИКА ═══ */
.kse-draft-status {
    font-size: .72em;
    font-weight: 500;
    color: rgba(255,255,255,.55);
    white-space: nowrap;
    transition: color .4s;
    letter-spacing: 0.2px;
}
.kse-draft-status.kse-draft-saved {
    color: #a8e6a3;  /* зелёный всплеск при сохранении */
}

/* ═══ БАННЕР ВОССТАНОВЛЕНИЯ ═══ */
.kse-draft-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #fffbf0;
    border-bottom: 1px solid #e8d9a0;
    font-family: var(--kse-font);
    font-size: .8em;
    color: #5a4a00;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.kse-draft-banner-icon {
    font-size: 1.1em;
    line-height: 1;
}

/* Локальный черновик в боковой панели */
.kse-draft-sidebar-card {
    margin: 10px 12px;
    padding: 10px;
    border: 1px solid var(--kse-border2);
    border-radius: var(--kse-radius);
    background: #edf5fb;
    color: var(--kse-accent);
    flex-shrink: 0;
}
.kse-draft-sidebar-title {
    font-size: .68em;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.25;
    margin-bottom: 5px;
}
.kse-draft-sidebar-time {
    font-size: .68em;
    font-weight: 600;
    color: var(--kse-text2);
    line-height: 1.35;
}
.kse-draft-sidebar-meta {
    font-size: .64em;
    color: var(--kse-text3);
    line-height: 1.35;
    margin-top: 3px;
    overflow-wrap: anywhere;
}
.kse-draft-sidebar-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 8px;
}
.kse-draft-sidebar-actions button {
    font-family: var(--kse-font);
    border-radius: var(--kse-radius);
    border: 1px solid var(--kse-accent);
    padding: 6px 8px;
    font-size: .66em;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.kse-draft-sidebar-restore {
    background: var(--kse-accent);
    color: #fff;
}
.kse-draft-sidebar-restore:hover {
    background: var(--kse-primary);
    border-color: var(--kse-primary);
}
.kse-draft-sidebar-dismiss {
    background: #fff;
    color: var(--kse-accent);
}
.kse-draft-sidebar-dismiss:hover {
    background: #fff4f0;
    border-color: var(--kse-primary);
    color: var(--kse-primary);
}

/* ═══ ГОРИЗОНТАЛЬНАЯ ПАНЕЛЬ СИМВОЛОВ ═══ */
.kse-symbols-bar {
    flex-shrink: 0;
    background: var(--kse-white);
    border-bottom: 2px solid var(--kse-border);
}

/* Строка вкладок групп */
.kse-symbols-bar-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    background: var(--kse-bg);
    border-bottom: 1px solid var(--kse-border);
    scrollbar-width: none;
}
.kse-symbols-bar-tabs::-webkit-scrollbar { display: none; }

.kse-sym-tab {
    font-family: var(--kse-font);
    font-size: .68em;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    padding: 6px 12px;
    background: transparent;
    color: var(--kse-text3);
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .15s, border-color .15s, background .15s;
    margin-bottom: -1px;
}
.kse-sym-tab:hover { color: var(--kse-accent); background: var(--kse-muted); }
.kse-sym-tab.kse-active {
    color: var(--kse-accent);
    border-bottom-color: var(--kse-accent);
    background: var(--kse-white);
}

/* Строка символов выбранной группы */
.kse-symbols-bar-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 6px 10px;
    overflow-x: auto;
    min-height: 44px;
    align-items: center;
    scrollbar-width: thin;
    scrollbar-color: var(--kse-border) transparent;
}
.kse-symbols-bar-scroll::-webkit-scrollbar { height: 4px; }
.kse-symbols-bar-scroll::-webkit-scrollbar-thumb { background: var(--kse-border); border-radius: 2px; }

/* ═══ ОСНОВНОЕ ТЕЛО ═══ */
.kse-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ═══ ЛЕВАЯ БОКОВАЯ ПАНЕЛЬ ═══ */
.kse-sidebar {
    width: var(--kse-sidebar);
    min-width: var(--kse-sidebar);
    background: var(--kse-white);
    border-right: 1px solid var(--kse-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--kse-border) transparent;
}
.kse-sidebar::-webkit-scrollbar { width: 4px; }
.kse-sidebar::-webkit-scrollbar-thumb { background: var(--kse-border); border-radius: 2px; }

/* Настройки сетки */
.kse-grid-settings {
    padding: 10px 12px;
    border-bottom: 1px solid var(--kse-border);
    background: var(--kse-bg);
    flex-shrink: 0;
}
.kse-grid-settings-title {
    font-size: .7em;
    font-weight: 600;
    color: var(--kse-accent);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}
.kse-size-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.kse-size-label {
    font-size: .72em;
    color: var(--kse-text3);
    font-weight: 500;
    width: 48px;
    flex-shrink: 0;
}
.kse-size-input {
    font-family: var(--kse-font);
    width: 52px;
    padding: 4px 6px;
    border: 1px solid var(--kse-border2);
    border-radius: var(--kse-radius);
    font-size: .8em;
    color: var(--kse-text);
    text-align: center;
    outline: none;
    transition: border-color .2s;
}
.kse-size-input:focus { border-color: var(--kse-accent); }
.kse-row-mode-settings {
    margin: 8px 0 4px;
    padding-top: 8px;
    border-top: 1px solid var(--kse-border);
}
.kse-row-mode-title {
    font-size: .62em;
    font-weight: 600;
    color: var(--kse-text3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 6px;
}
.kse-row-mode-option {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 6px;
    font-size: .68em;
    line-height: 1.35;
    color: var(--kse-text2);
    cursor: pointer;
}
.kse-row-mode-option input {
    margin: 2px 0 0;
    flex-shrink: 0;
}
.kse-btn-build {
    font-family: var(--kse-font);
    width: 100%;
    padding: 7px;
    background: var(--kse-accent);
    color: #fff;
    border: none;
    border-radius: var(--kse-radius);
    font-size: .72em;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .2s;
    margin-top: 4px;
}
.kse-btn-build:hover { background: #1a4291; }

/* Изменение размеров */
.kse-resize-amount-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.kse-resize-group-label {
    font-size: .62em;
    font-weight: 600;
    color: var(--kse-text3);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 3px;
    margin-top: 2px;
}
.kse-resize-pair {
    display: flex;
    gap: 3px;
    margin-bottom: 3px;
}
.kse-resize-pair .kse-resize-btn {
    flex: 1;
}
.kse-resize-btn {
    font-family: var(--kse-font);
    font-size: .65em;
    padding: 4px 5px;
    border: 1px solid var(--kse-border2);
    border-radius: var(--kse-radius);
    background: var(--kse-white);
    color: var(--kse-text2);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
    text-align: center;
}
.kse-resize-btn:hover { background: var(--kse-accent); color: #fff; border-color: var(--kse-accent); }

/* Инструменты */
.kse-tools {
    padding: 8px 12px;
    border-bottom: 1px solid var(--kse-border);
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}
.kse-tools .kse-grid-settings-title {
    margin-bottom: 1px;
}
.kse-tool-btn {
    font-family: var(--kse-font);
    font-size: .68em;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 5px 8px;
    border-radius: var(--kse-radius);
    border: 1px solid var(--kse-border2);
    background: var(--kse-white);
    color: var(--kse-text2);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
}
.kse-tool-btn:hover         { background: var(--kse-bg); }
.kse-tool-btn.kse-active    { background: var(--kse-accent); color: #fff; border-color: var(--kse-accent); }
.kse-tool-btn:disabled,
.kse-tool-btn.kse-disabled {
    opacity: .45;
    cursor: not-allowed;
    background: var(--kse-white);
    color: var(--kse-text3);
}
.kse-tool-btn:disabled:hover,
.kse-tool-btn.kse-disabled:hover { background: var(--kse-white); }
.kse-tool-btn.kse-eraser    { border-color: var(--kse-primary); color: var(--kse-primary); }
.kse-tool-btn.kse-eraser.kse-active { background: var(--kse-primary); color: #fff; }
.kse-tool-btn.kse-clear-all { border-color: #c0392b; color: #c0392b; }
.kse-tool-btn.kse-clear-all:hover { background: #c0392b; color: #fff; }
/* Цветовая палитра */
.kse-color-palette {
    padding: 8px 12px;
    border-bottom: 1px solid var(--kse-border);
    flex-shrink: 0;
}
.kse-palette-title {
    font-size: .68em;
    font-weight: 600;
    color: var(--kse-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.kse-colors {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.kse-color-swatch {
    width: 20px;
    height: 20px;
    border-radius: var(--kse-radius);
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s, border-color .15s;
    flex-shrink: 0;
}
.kse-color-swatch:hover       { transform: scale(1.15); }
.kse-color-swatch.kse-active  { border-color: var(--kse-accent); }
.kse-color-none {
    width: 20px;
    height: 20px;
    border-radius: var(--kse-radius);
    border: 1px dashed var(--kse-border2);
    cursor: pointer;
    background: var(--kse-white);
    position: relative;
    flex-shrink: 0;
}
.kse-color-none::after {
    content: '×';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--kse-text3);
    line-height: 18px;
    text-align: center;
}
.kse-color-none.kse-active { border-color: var(--kse-accent); border-style: solid; }

/* Активный символ — в sidebar внизу */
.kse-active-sym-bar {
    padding: 10px 12px;
    border-top: 1px solid var(--kse-border);
    background: var(--kse-bg);
    font-size: .72em;
    color: var(--kse-text3);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
}
.kse-active-sym-img {
    width: 28px;
    height: 28px;
    image-rendering: pixelated;
    border: 1px solid var(--kse-border);
    border-radius: var(--kse-radius);
}
.kse-active-sym-pattern {
    display: inline-flex;
    align-items: center;
    width: max-content;
    border: 1px solid var(--kse-border);
    border-radius: var(--kse-radius);
    overflow: hidden;
    background: var(--kse-white);
}
.kse-active-sym-pattern img {
    width: 28px;
    height: 28px;
    display: block;
    image-rendering: pixelated;
    border-right: 1px solid var(--kse-border);
}
.kse-active-sym-pattern img:last-child { border-right: none; }
.kse-active-sym-name {
    font-weight: 600;
    color: var(--kse-accent);
    font-size: .92em;
    line-height: 1.3;
}
.kse-active-sym-desc {
    color: var(--kse-text3);
    font-size: .9em;
    line-height: 1.4;
}

/* ═══ СИМВОЛЫ В ПАНЕЛИ ═══ */
.kse-sym-item {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kse-border);
    border-radius: var(--kse-radius);
    cursor: pointer;
    background: var(--kse-white);
    transition: border-color .15s, background .15s;
    position: relative;
    flex-shrink: 0;
}
.kse-sym-item:hover { border-color: var(--kse-accent); background: var(--kse-bg); }
.kse-sym-item.kse-active {
    border-color: var(--kse-primary);
    background: rgba(177,113,78,.08);
    box-shadow: 0 0 0 2px rgba(177,113,78,.25);
}
.kse-sym-item.kse-sym-item-pattern {
    width: 106px;
    padding: 0 4px;
}
.kse-sym-pattern-preview {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    background: var(--kse-white);
}
.kse-sym-item img {
    width: 24px;
    height: 24px;
    display: block;
    image-rendering: pixelated;
    pointer-events: none;
}
.kse-sym-pattern-preview img {
    border-left: 1px solid var(--kse-border);
}
.kse-sym-pattern-preview img:first-child { border-left: none; }

/* Tooltip — данные хранятся в data-атрибутах, позиционирование через JS */
/* Плавающий тултип рендерится в .kse-wrap, вне overflow-контейнера */
.kse-float-tooltip {
    /* position: fixed проставляется через JS — вне любых overflow-контейнеров */
    background: var(--kse-accent);
    color: #fff;
    font-family: var(--kse-font);
    font-size: .68em;
    font-weight: 500;
    padding: 5px 8px;
    border-radius: var(--kse-radius);
    white-space: normal;
    max-width: 200px;
    min-width: 120px;
    line-height: 1.4;
    z-index: 9999;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
    text-align: center;
    display: none;
}
.kse-float-tooltip em {
    font-style: normal;
    color: rgba(255,255,255,.75);
    display: block;
    margin-top: 2px;
}
.kse-float-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--kse-accent);
}

/* ═══ РАБОЧАЯ ОБЛАСТЬ ═══ */
.kse-canvas-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--kse-bg);
    min-width: 0;
}

/* Область прокрутки схемы */
.kse-canvas-scroll {
    flex: 1;
    overflow: auto;
    padding: 16px;
    min-height: 0;
}
.kse-canvas-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.kse-canvas-scroll::-webkit-scrollbar-thumb { background: var(--kse-border); border-radius: 4px; }

/* Заглушка «нет схемы» */
.kse-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 200px;
    color: var(--kse-text3);
    font-size: .88em;
    text-align: center;
    gap: 8px;
}
.kse-empty-state-icon {
    font-size: 2.5em;
    opacity: .3;
    line-height: 1;
}

/* ═══ СХЕМА ═══ */
.kse-grid-outer {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    user-select: none;
    position: relative;
}
.kse-col-numbers {
    display: flex;
    gap: 0;
    margin-top: 2px;
}
.kse-col-num {
    width: var(--kse-cell);
    height: 16px;
    margin: -0.5px;
    text-align: center;
    font-size: .6em;
    color: var(--kse-text3);
    font-weight: 500;
    line-height: 16px;
    flex-shrink: 0;
}
.kse-row {
    display: flex;
    align-items: center;
    gap: 0;
}
.kse-row-num-left,
.kse-row-num-right {
    width: 26px;
    height: var(--kse-cell);
    font-size: .62em;
    color: var(--kse-text3);
    font-weight: 500;
    line-height: var(--kse-cell);
    flex-shrink: 0;
    user-select: none;
}
.kse-row-num-left {
    text-align: right;
    padding-right: 4px;
}
.kse-row-num-right {
    text-align: left;
    padding-left: 4px;
}
.kse-row-num-spacer {
    width: 26px;
    flex-shrink: 0;
}
.kse-cell {
    width: var(--kse-cell);
    height: var(--kse-cell);
    border: 1px solid #ccc8be;
    cursor: crosshair;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kse-white);
    flex-shrink: 0;
    position: relative;
    transition: background .1s;
    margin: -0.5px;
}
.kse-cell:hover { border-color: var(--kse-accent); z-index: 1; }
.kse-cell img {
    width: 22px;
    height: 22px;
    display: block;
    image-rendering: pixelated;
    pointer-events: none;
}

/* ═══ УСЛОВНЫЕ ОБОЗНАЧЕНИЯ (ЛЕГЕНДА) ═══ */
.kse-legend {
    border-top: 1px solid var(--kse-border);
    background: var(--kse-white);
    flex-shrink: 0;
}
.kse-legend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 14px;
    cursor: pointer;
    user-select: none;
    background: var(--kse-bg);
    transition: background .15s;
}
.kse-legend-header:hover { background: var(--kse-muted); }
.kse-legend-title {
    font-size: .68em;
    font-weight: 600;
    color: var(--kse-accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kse-legend-arrow {
    font-size: .65em;
    color: var(--kse-text3);
    transition: transform .2s;
}
.kse-legend-collapsed .kse-legend-arrow { transform: rotate(-90deg); }
.kse-legend-collapsed .kse-legend-body  { display: none; }

.kse-legend-body {
    padding: 8px 14px;
    max-height: 160px;
    overflow-y: auto;
}
.kse-legend-body::-webkit-scrollbar { width: 4px; }
.kse-legend-body::-webkit-scrollbar-thumb { background: var(--kse-border); border-radius: 2px; }

.kse-legend-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.kse-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .72em;
    color: var(--kse-text2);
    line-height: 1.4;
}
.kse-legend-imgs {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    padding-top: 1px;
}
.kse-legend-imgs img {
    width: 22px;
    height: 22px;
    image-rendering: pixelated;
    border: 1px solid var(--kse-border);
    border-radius: 1px;
    flex-shrink: 0;
}
.kse-legend-desc { color: var(--kse-text2); }
.kse-legend-empty {
    font-size: .72em;
    color: var(--kse-text3);
    font-style: italic;
}

/* ═══ ЛЕГЕНДА: БЛОК КОС ═══ */
.kse-legend-item.kse-legend-cable {
    align-items: flex-start;
    gap: 10px;
}
.kse-legend-imgs-multi {
    flex-wrap: wrap;
    max-width: 180px;
    gap: 3px;
    align-items: center;
}
.kse-legend-imgs-multi img {
    cursor: help;
}
.kse-legend-cable-desc {
    font-size: .72em;
    color: var(--kse-text2);
    line-height: 1.5;
}
.kse-legend-cable-desc strong {
    font-size: 1em;
    color: var(--kse-text);
    font-weight: 600;
}
.kse-legend-cable-hint {
    color: var(--kse-text3);
    font-style: italic;
}
.kse-legend-cable-algo {
    color: var(--kse-text3);
    font-style: italic;
    font-size: .95em;
}

/* ═══ TOAST ═══ */
.kse-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--kse-accent);
    color: #fff;
    font-family: var(--kse-font);
    font-size: .82em;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: var(--kse-radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
    z-index: 999999;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.kse-toast.kse-show { opacity: 1; transform: translateY(0); }
.kse-toast.kse-error { background: #c0392b; }

/* ═══ МОДАЛ: АВТОРИЗАЦИЯ ═══ */
.kse-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.kse-auth-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 45, 106, .55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.kse-auth-modal-box {
    position: relative;
    z-index: 1;
    background: var(--kse-white);
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.22);
    padding: 36px 32px 28px;
    max-width: 360px;
    width: calc(100% - 32px);
    text-align: center;
    font-family: var(--kse-font);
}
.kse-auth-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1em;
    color: var(--kse-text3);
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color .2s;
}
.kse-auth-modal-close:hover { color: var(--kse-text); }
.kse-auth-modal-icon {
    font-size: 2.2em;
    margin-bottom: 12px;
    line-height: 1;
}
.kse-auth-modal-title {
    font-size: 1em;
    font-weight: 700;
    color: var(--kse-accent);
    margin: 0 0 10px;
    line-height: 1.3;
}
.kse-auth-modal-text {
    font-size: .82em;
    color: var(--kse-text2);
    margin: 0 0 18px;
    line-height: 1.6;
}
.kse-auth-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.kse-auth-modal-actions .kse-btn {
    width: 100%;
    padding: 10px 16px;
    font-size: .82em;
    text-decoration: none;
    display: block;
}
.kse-auth-modal-actions .kse-btn-primary {
    background: var(--kse-accent) !important;
    border-color: var(--kse-accent) !important;
    color: #fff !important;
}
.kse-auth-modal-actions .kse-btn-primary:hover {
    background: var(--kse-primary) !important;
    border-color: var(--kse-primary) !important;
    color: #fff !important;
}
.kse-auth-modal-actions .kse-btn-secondary,
.kse-auth-modal-actions .kse-btn-ghost {
    background: #edf5fb !important;
    border: 1px solid #cbdfee !important;
    color: var(--kse-accent) !important;
}
.kse-auth-modal-actions .kse-btn-secondary:hover,
.kse-auth-modal-actions .kse-btn-ghost:hover {
    background: var(--kse-accent) !important;
    border-color: var(--kse-accent) !important;
    color: #fff !important;
}
.kse-auth-modal-note {
    font-size: .72em;
    color: var(--kse-text3);
    margin: 0;
    line-height: 1.4;
}

/* ═══ КНОПКА ОТКРЫТЬ В НОВОМ ОКНЕ ═══ */
.kse-open-fullscreen {
    display: flex;
    justify-content: flex-end;
    padding: 10px 0 0;
}
.kse-open-fullscreen a {
    font-family: var(--kse-font);
    font-size: .78em;
    font-weight: 600;
    color: var(--kse-accent);
    text-decoration: none;
    letter-spacing: 0.3px;
    border: 1px solid var(--kse-border2);
    border-radius: var(--kse-radius);
    padding: 6px 14px;
    background: var(--kse-white);
    transition: background .2s, color .2s;
}
.kse-open-fullscreen a:hover {
    background: var(--kse-accent);
    color: #fff;
    border-color: var(--kse-accent);
}

/* ═══ ПЕЧАТЬ ═══ */
.kse-print-header {
    display: none;
    font-family: var(--kse-font);
    padding: 0 16px 12px;
}
.kse-print-title {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--kse-accent);
    margin: 0 0 4px;
}
.kse-print-meta {
    font-size: .78em;
    color: var(--kse-text3);
}

/* ————————————————————————————————————————————————————
   Печать: body.kse-is-printing — скрываем всё кроме #kse-editor
   Используем visibility (не display:none) чтобы вложенный элемент
   мог стать visibility:visible даже когда родитель hidden.
   Работает и через кнопку, и Ctrl+P (через beforeprint/afterprint).
———————————————————————————————————————————————————— */
@media print {

    /* 1. Всё тело — прозрачно */
    body.kse-is-printing * {
        visibility: hidden !important;
    }
    body.kse-is-printing {
        background: #fff !important;
    }

    /* 2. Редактор и всё внутри — видимо */
    body.kse-is-printing #kse-editor,
    body.kse-is-printing #kse-editor * {
        visibility: visible !important;
    }

    /* 3. Редактор позиционируем в левый верхний угол */
    body.kse-is-printing #kse-editor {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background: #fff !important;
    }

    /* 4. Раскрываем все overflow-контейнеры внутри редактора */
    body.kse-is-printing .kse-wrap {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        border: none !important;
        box-shadow: none !important;
        background: #fff !important;
    }
    body.kse-is-printing .kse-body {
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
        flex-direction: column !important;
    }
    body.kse-is-printing .kse-canvas-wrap   { overflow: visible !important; height: auto !important; }
    body.kse-is-printing .kse-canvas-scroll { overflow: visible !important; height: auto !important; padding: 0 !important; }
    body.kse-is-printing .kse-grid-outer    { overflow: visible !important; }
    body.kse-is-printing .kse-legend        { max-height: none !important; border: none !important; overflow: visible !important; }
    body.kse-is-printing .kse-legend-body   { max-height: none !important; overflow: visible !important; }
    body.kse-is-printing .kse-print-header  { display: block !important; visibility: visible !important; }
    body.kse-is-printing .kse-cell          { border-color: #aaa !important; }

    /* 5. Скрываем ненужные панели */
    body.kse-is-printing .kse-topbar,
    body.kse-is-printing .kse-symbols-bar,
    body.kse-is-printing .kse-sidebar,
    body.kse-is-printing .kse-resize-row,
    body.kse-is-printing .kse-btn-build,
    body.kse-is-printing .kse-auth-modal,
    body.kse-is-printing .kse-draft-banner,
    body.kse-is-printing .kse-draft-status,
    body.kse-is-printing .kse-open-fullscreen,
    body.kse-is-printing .kse-float-tooltip {
        display: none !important;
        visibility: hidden !important;
    }

    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* ═══ ПРЯМОУГОЛЬНОЕ ВЫДЕЛЕНИЕ ═══ */
.kse-cell.kse-selected {
    outline: 2px solid #0d2d6a;
    outline-offset: -2px;
    background-color: rgba(13, 45, 106, 0.08) !important;
    z-index: 2;
    position: relative;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 780px) {
    :root { --kse-sidebar: 140px; --kse-cell: 22px; }
    .kse-wrap { height: 580px; }
    .kse-topbar { padding: 6px 10px; gap: 6px; }
    .kse-topbar input[type="text"].kse-scheme-name { width: 120px; }
    .kse-fullscreen-page .kse-wrap { height: 100vh; }
}
@media (max-width: 480px) {
    :root { --kse-sidebar: 120px; --kse-cell: 20px; }
    .kse-wrap { height: 500px; }
    .kse-fullscreen-page .kse-wrap { height: 100vh; }
}

/* HAT99 site refresh */
.kse-wrap {
    background:
        radial-gradient(circle at 8% 0, rgba(203, 223, 238, .58), transparent 34%),
        linear-gradient(135deg, #fffaf7, #edf5fb);
    border-color: var(--kse-border);
    border-radius: var(--kse-radius);
    box-shadow: var(--kse-shadow);
    color: var(--kse-text);
}

.kse-topbar {
    background:
        radial-gradient(circle at 96% 0, rgba(203, 223, 238, .3), transparent 28%),
        linear-gradient(135deg, #30587c, #3d6b8e);
    color: #fff;
    gap: 9px;
    padding: 10px 14px;
}

.kse-topbar-title {
    color: #fff;
    font-weight: 900;
}

.kse-topbar input[type="text"].kse-scheme-name {
    background: rgba(255, 255, 255, .16);
    border-color: rgba(203, 223, 238, .55);
    border-radius: var(--kse-radius);
    color: #fff;
}

.kse-topbar input[type="text"].kse-scheme-name:focus {
    background: rgba(255, 255, 255, .24);
    border-color: #cbdfee;
    box-shadow: 0 0 0 3px rgba(203, 223, 238, .25);
}

.kse-btn,
.kse-btn-build,
.kse-tool-btn,
.kse-resize-btn,
.kse-open-fullscreen a,
.kse-auth-modal-actions .kse-btn {
    border-radius: var(--kse-radius);
    font-weight: 900;
    letter-spacing: .02em;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.kse-btn:hover,
.kse-btn-build:hover,
.kse-tool-btn:hover,
.kse-resize-btn:hover,
.kse-open-fullscreen a:hover {
    transform: translateY(-1px);
}

.kse-btn-primary,
.kse-btn-build,
.kse-tool-btn.kse-active,
.kse-share-modal-open,
.kse-share-option-open {
    background: #30587c !important;
    border-color: #30587c !important;
    color: #fff !important;
    box-shadow: 0 12px 28px rgba(48, 88, 124, .18);
}

.kse-btn-primary:hover,
.kse-btn-build:hover,
.kse-tool-btn.kse-active:hover,
.kse-share-modal-open:hover,
.kse-share-option-open:hover {
    background: #f2886f !important;
    border-color: #f2886f !important;
    color: #fff !important;
}

.kse-btn-secondary,
.kse-btn-ghost {
    background: rgba(203, 223, 238, .18);
    border: 1px solid rgba(203, 223, 238, .58);
    color: #fff;
}

.kse-btn-secondary:hover,
.kse-btn-ghost:hover {
    background: #cbdfee;
    border-color: #cbdfee;
    color: #30587c;
}

#kse-desc-result-modal .kse-btn-secondary,
#kse-desc-result-modal .kse-btn-ghost,
#kse-desc-modal .kse-btn-ghost,
#kse-print-modal .kse-btn-secondary,
#kse-print-modal .kse-btn-primary {
    background: #cbdfee;
    border-color: #cbdfee;
    color: #30587c;
}

#kse-desc-result-modal .kse-btn-secondary:hover,
#kse-desc-result-modal .kse-btn-ghost:hover,
#kse-desc-modal .kse-btn-ghost:hover,
#kse-print-modal .kse-btn-secondary:hover,
#kse-print-modal .kse-btn-primary:hover {
    background: #30587c;
    border-color: #30587c;
    color: #fff;
}

.kse-draft-banner {
    background: #edf5fb;
    border-bottom-color: #cbdfee;
    color: #30587c;
}

.kse-symbols-bar {
    background: #fff;
    border-bottom-color: #eadbd5;
}

.kse-symbols-bar-tabs,
.kse-grid-settings,
.kse-active-sym-bar,
.kse-legend-header {
    background: #edf5fb;
}

.kse-sym-tab {
    border-radius: 8px 8px 0 0;
    color: #6d797b;
    font-weight: 900;
}

.kse-sym-tab:hover,
.kse-sym-tab.kse-active {
    background: #fff;
    border-bottom-color: #f2886f;
    color: #30587c;
}

.kse-body {
    background: #fff;
}

.kse-sidebar {
    background: #fff;
    border-right-color: #eadbd5;
}

.kse-grid-settings-title,
.kse-palette-title,
.kse-legend-title,
.kse-active-sym-name,
.kse-print-title {
    color: #30587c;
    font-weight: 900;
}

.kse-size-input,
.kse-rename-input,
.kse-modal input,
.kse-modal textarea,
.kse-modal select {
    border-color: #cbdfee;
    border-radius: var(--kse-radius);
    color: #183338;
}

.kse-size-input:focus,
.kse-rename-input:focus,
.kse-modal input:focus,
.kse-modal textarea:focus,
.kse-modal select:focus {
    border-color: #30587c;
    box-shadow: 0 0 0 3px rgba(203, 223, 238, .55);
}

.kse-resize-btn,
.kse-tool-btn,
.kse-sym-item,
.kse-active-sym-img,
.kse-active-sym-pattern,
.kse-legend-imgs img {
    border-color: #eadbd5;
    border-radius: var(--kse-radius);
}

.kse-resize-btn:hover,
.kse-tool-btn:hover,
.kse-sym-item:hover,
.kse-open-fullscreen a:hover {
    background: #cbdfee;
    border-color: #cbdfee;
    color: #30587c;
}

.kse-tool-btn.kse-eraser {
    border-color: #f2886f;
    color: #f2886f;
}

.kse-tool-btn.kse-eraser.kse-active,
.kse-tool-btn.kse-clear-all:hover {
    background: #f2886f;
    border-color: #f2886f;
    color: #fff;
}

.kse-color-swatch.kse-active,
.kse-color-none.kse-active {
    border-color: #30587c;
    box-shadow: 0 0 0 3px rgba(203, 223, 238, .72);
}

.kse-sym-item.kse-active {
    background: #edf5fb;
    border-color: #30587c;
    box-shadow: 0 0 0 3px rgba(203, 223, 238, .8);
}

.kse-canvas-wrap,
.kse-canvas-scroll {
    background:
        linear-gradient(45deg, rgba(203, 223, 238, .22) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(203, 223, 238, .22) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(203, 223, 238, .22) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(203, 223, 238, .22) 75%),
        #fffaf7;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
    background-size: 20px 20px;
}

.kse-cell {
    border-color: #d7dde2;
    background: #fff;
}

.kse-cell:hover {
    border-color: #30587c;
}

.kse-cell.kse-selected {
    background-color: rgba(203, 223, 238, .55) !important;
    outline-color: #30587c;
}

.kse-legend {
    border-top-color: #eadbd5;
}

.kse-legend-header:hover {
    background: #cbdfee;
}

.kse-toast,
.kse-float-tooltip {
    background: #30587c;
    border-radius: var(--kse-radius);
    box-shadow: 0 16px 34px rgba(48, 88, 124, .22);
}

.kse-toast.kse-error {
    background: #bf3f35;
}

.kse-float-tooltip::after {
    border-top-color: #30587c;
}

.kse-auth-modal-overlay {
    background: rgba(24, 51, 56, .55);
}

.kse-auth-modal-box {
    border: 1px solid #eadbd5;
    border-radius: var(--kse-radius);
    box-shadow: 0 24px 70px rgba(24, 51, 56, .24);
}

.kse-auth-modal-title {
    color: #30587c;
    font-weight: 900;
}

.kse-open-fullscreen a {
    background: #cbdfee;
    border-color: #cbdfee;
    color: #30587c;
}

@media (max-width: 780px) {
    .kse-wrap {
        border-left: 0;
        border-radius: 0;
        border-right: 0;
    }
}