/* === Editor Layout === */
.editor-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px 60px;
    position: relative;
    z-index: 1;
}

.editor-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    padding: 80px 0;
    color: var(--text-soft);
    font-size: 1.1rem;
}

.editor-error {
    text-align: center;
    padding: 80px 20px;
    color: var(--red);
}
.editor-error p {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

/* === Header actions === */
.editor-header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.save-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-soft);
    cursor: default;
}
.save-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--teal);
    flex-shrink: 0;
}
.save-indicator.dirty .save-dot {
    background: var(--amber);
}
.save-indicator.saving .save-dot {
    background: var(--teal-strong);
    animation: pulse-dot 1s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* === Level sections === */
.level-section {
    position: relative;
    border: 1px solid var(--line);
    border-left: 3px solid var(--teal);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(10, 28, 30, 0.84), rgba(5, 16, 17, 0.92));
    box-shadow: var(--shadow);
    margin-bottom: 16px;
    overflow: hidden;
}

.level-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}
.level-header:hover {
    background: rgba(16, 185, 129, 0.04);
}

.level-toggle {
    font-size: 0.85rem;
    color: var(--text-soft);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.level-section.collapsed .level-toggle {
    transform: rotate(-90deg);
}

.level-number {
    background: var(--green-soft);
    color: var(--teal);
    font-family: 'JetBrains Mono', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 2px 10px;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.level-name {
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--text);
}

.level-stats {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--text-dim);
    flex-shrink: 0;
}

.level-body {
    padding: 16px 18px 20px;
    display: block;
    border-top: 1px solid var(--line);
}
.level-section.collapsed .level-body {
    display: none;
}

/* === Sections inside level === */
.editor-section {
    margin-top: 16px;
}

.editor-section-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* === Quill overrides for cyber theme === */
.quill-wrap {
    margin-bottom: 12px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    transition: border-color 0.16s;
}
.quill-wrap:focus-within {
    border-color: rgba(16, 185, 129, 0.34);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.08);
}

.quill-wrap .ql-toolbar.ql-snow {
    background: rgba(5, 16, 17, 0.6);
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 6px 8px;
}

.quill-wrap .ql-container.ql-snow {
    border: none;
    background: var(--input);
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    color: var(--text);
}

.quill-wrap .ql-editor {
    min-height: 80px;
    padding: 12px 14px;
    line-height: 1.6;
}

.quill-wrap.compact .ql-editor {
    min-height: 50px;
}

.quill-wrap .ql-editor.ql-blank::before {
    color: var(--text-dim);
    font-style: normal;
}

/* Quill toolbar buttons */
.quill-wrap .ql-snow .ql-stroke {
    stroke: var(--text-soft);
}
.quill-wrap .ql-snow .ql-fill,
.quill-wrap .ql-snow .ql-stroke.ql-fill {
    fill: var(--text-soft);
}
.quill-wrap .ql-snow .ql-picker {
    color: var(--text-soft);
}
.quill-wrap .ql-snow .ql-picker-options {
    background: var(--panel-strong);
    border-color: var(--line);
    border-radius: var(--radius-sm);
}
.quill-wrap .ql-snow .ql-active .ql-stroke {
    stroke: var(--teal);
}
.quill-wrap .ql-snow .ql-active .ql-fill {
    fill: var(--teal);
}
.quill-wrap .ql-snow .ql-active {
    color: var(--teal);
}
.quill-wrap .ql-snow button:hover .ql-stroke {
    stroke: var(--text);
}
.quill-wrap .ql-snow button:hover .ql-fill {
    fill: var(--text);
}

/* Quill color picker fix */
.ql-snow .ql-color-picker .ql-picker-label svg {
    width: 18px;
    height: 18px;
}

/* Quill tooltip (link dialog) */
.ql-snow .ql-tooltip {
    background: var(--panel-strong);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}
.ql-snow .ql-tooltip input[type="text"] {
    background: var(--input);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 8px;
}

/* === Prompt row === */
.prompt-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.prompt-editor {
    flex: 1;
    min-width: 0;
}
.prompt-time {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 38px;
}
.prompt-time label {
    font-size: 0.75rem;
    color: var(--text-dim);
}
.prompt-time input {
    width: 70px;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 6px 8px;
    font-size: 0.9rem;
    font-family: inherit;
    text-align: center;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.prompt-time input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.34);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}
.prompt-penalty-badge {
    font-size: 0.7rem;
    color: var(--red);
    font-weight: 600;
    padding: 2px 6px;
    border: 1px solid var(--red);
    border-radius: 6px;
}

/* === Bonus === */
.bonus-card {
    background: rgba(16, 185, 129, 0.03);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 12px;
}
.bonus-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.bonus-header label {
    font-size: 0.8rem;
    color: var(--text-dim);
}
.bonus-header input {
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 5px 10px;
    font-size: 0.9rem;
    font-family: inherit;
    flex: 1;
    min-width: 150px;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.bonus-header input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.34);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}
.bonus-negative {
    font-size: 0.75rem;
    color: var(--red);
    font-weight: 600;
}
.bonus-answers {
    margin-top: 8px;
}
.bonus-answers label {
    font-size: 0.8rem;
    color: var(--text-dim);
    display: block;
    margin-bottom: 4px;
}
.bonus-answers input {
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--text);
    padding: 5px 10px;
    font-size: 0.85rem;
    font-family: inherit;
    width: 100%;
    transition: border-color 0.16s, box-shadow 0.16s;
}
.bonus-answers input:focus {
    outline: none;
    border-color: rgba(16, 185, 129, 0.34);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}
.bonus-time {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: var(--text-dim);
}

/* === Answers (read-only) === */
.answers-readonly {
    background: rgba(16, 185, 129, 0.03);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.answers-readonly .answer-tag {
    display: inline-block;
    background: var(--green-soft);
    color: var(--teal);
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    margin: 2px 4px 2px 0;
}
.answers-readonly .sector-title {
    font-size: 0.8rem;
    color: var(--text-dim);
    font-weight: 600;
    margin-top: 8px;
    margin-bottom: 4px;
}
.answers-readonly .sector-title:first-child {
    margin-top: 0;
}

/* === Validation panel === */
.validation-panel {
    background: var(--amber-soft);
    border: 1px solid var(--amber);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow: hidden;
}
.validation-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--amber);
}
.validation-close {
    background: none;
    border: none;
    color: var(--amber);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 0 4px;
}
.validation-list {
    list-style: none;
    padding: 0 14px 10px;
    font-size: 0.85rem;
    color: var(--text);
}
.validation-list li {
    padding: 3px 0;
}
.validation-list li::before {
    content: "!";
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    background: var(--amber);
    color: var(--bg-deep);
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    margin-right: 8px;
    flex-shrink: 0;
}

/* === Save progress === */
.save-progress {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, rgba(10, 28, 30, 0.84), rgba(5, 16, 17, 0.92));
    padding: 14px 18px;
    margin-bottom: 16px;
}
.save-progress-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 0.9rem;
}
#saveProgressPct {
    color: var(--teal);
    font-weight: 600;
    font-family: 'JetBrains Mono', sans-serif;
}
.save-progress-bar-bg {
    width: 100%;
    height: 6px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 3px;
    overflow: hidden;
}
.save-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--teal-strong), var(--teal));
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* === Responsive === */
@media (max-width: 640px) {
    .editor-container {
        padding: 0 10px 40px;
    }
    .level-header {
        padding: 12px 14px;
    }
    .level-body {
        padding: 0 14px 14px;
    }
    .prompt-row {
        flex-direction: column;
    }
    .prompt-time {
        padding-top: 0;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }
    .editor-header-actions {
        gap: 6px;
    }
    .save-indicator .save-text {
        display: none;
    }
}

/* === Toolbar редактора === */
.editor-toolbar {
    position: sticky;
    top: 84px; /* отступ от хедера */
    z-index: 20;
    background: rgba(10, 14, 12, 0.92);
    backdrop-filter: blur(10px);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 10px 14px;
    margin-top: 14px;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}
.editor-toolbar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.editor-toolbar-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.btn-ghost-small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
    transition: all 0.15s;
}
.btn-ghost-small:hover {
    background: rgba(16, 185, 129, 0.06);
    border-color: var(--line-strong);
    color: var(--text);
}
.btn-ghost-small svg { flex-shrink: 0; }

.editor-search-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--line);
    border-radius: 8px;
    transition: border-color 0.15s;
}
.editor-search-wrap:focus-within {
    border-color: rgba(16, 185, 129, 0.34);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}
.editor-search-wrap svg { color: var(--text-dim); flex-shrink: 0; }
.editor-search-wrap input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font: inherit;
    font-size: 0.88rem;
}
.editor-search-wrap input::placeholder { color: var(--text-dim); }
.editor-search-count {
    font-size: 0.75rem;
    color: var(--teal);
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.editor-levels-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 84px;
    overflow-y: auto;
}
.editor-level-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 28px;
    padding: 0 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.78rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.editor-level-pill:hover {
    border-color: var(--line-strong);
    color: var(--text);
    background: rgba(16, 185, 129, 0.08);
}
.editor-level-pill.is-target {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--teal);
    color: var(--teal);
}

/* === Поиск: скрытые/найденные уровни === */
.level-section.search-hidden { display: none !important; }
.level-section.search-match {
    box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.32);
}

/* === Цветные рамки секций внутри уровня === */
.editor-section-prompts {
    border: 1px solid rgba(250, 204, 21, 0.45); /* яркий жёлтый */
    border-radius: 10px;
    padding: 14px 16px;
    background: transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.editor-section-prompts:focus-within {
    border-color: rgba(250, 204, 21, 0.85);
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.12);
}
.editor-section-bonuses {
    border: 1px solid rgba(20, 184, 190, 0.5); /* бирюзовый */
    border-radius: 10px;
    padding: 14px 16px;
    background: transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.editor-section-bonuses:focus-within {
    border-color: rgba(20, 184, 190, 0.9);
    box-shadow: 0 0 0 3px rgba(20, 184, 190, 0.12);
}
.editor-section-prompts .editor-section-title,
.editor-section-bonuses .editor-section-title {
    color: var(--text-dim);
    margin-bottom: 10px;
}

/* === Активный бонус/подсказка: подсветка карточки при фокусе внутри === */
.bonus-card {
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.bonus-card:focus-within {
    border-color: rgba(20, 184, 190, 0.8);
    background: rgba(20, 184, 190, 0.04);
    box-shadow: 0 0 0 2px rgba(20, 184, 190, 0.18), 0 8px 24px rgba(0, 0, 0, 0.3);
}
.prompt-row {
    padding: 4px;
    border-radius: 8px;
    transition: background 0.2s;
}
.prompt-row:focus-within {
    background: rgba(250, 204, 21, 0.04);
}

/* Усиленная подсветка активного Quill-редактора */
.quill-wrap:focus-within {
    border-color: var(--teal) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22) !important;
}
.bonus-card:focus-within .quill-wrap:focus-within {
    border-color: rgb(20, 184, 190) !important;
    box-shadow: 0 0 0 3px rgba(20, 184, 190, 0.28) !important;
}
.editor-section-prompts .quill-wrap:focus-within {
    border-color: rgb(250, 204, 21) !important;
    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.22) !important;
}

/* === Auto-size answer chips === */
.answer-chip-input {
    field-sizing: content; /* Chrome 123+, автоподгонка */
    min-width: 50px;
    max-width: none;
    padding: 5px 10px;
}
/* Фолбек для старых браузеров — width через JS size-атрибут */
@supports not (field-sizing: content) {
    .answer-chip-input {
        min-width: 60px;
    }
}
.answer-chip-input:focus {
    min-width: 80px;
}

/* === Редактируемое время бонуса === */
.bonus-time-edit {
    display: inline-flex;
    gap: 8px;
    align-items: flex-end;
    margin-left: auto;
}
.bonus-time-edit .prompt-time-unit { min-width: 48px; }
.bonus-time-edit .prompt-time-unit input { width: 46px; }
.bonus-time-edit-label {
    font-size: 0.72rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    align-self: center;
}

/* === Prompt row — минуты + секунды, выравнивание по верху === */
.prompt-row {
    align-items: stretch;
}
.prompt-time {
    flex-shrink: 0;
    display: flex;
    gap: 6px;
    padding-top: 0;
    align-items: stretch;
}
.prompt-time-unit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 52px;
}
.prompt-time-unit label {
    font-size: 0.68rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}
.prompt-time-unit input {
    width: 52px;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    padding: 8px 6px;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    flex: 1;
}
.prompt-time-unit input:focus {
    outline: none;
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.08);
}

/* === Редактируемые ответы === */
.editor-section-answers {
    /* Нейтральный блок — как раньше */
}
.answers-edit {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.answer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.answer-chip-input {
    background: rgba(16, 185, 129, 0.08);
    color: var(--teal);
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 6px;
    padding: 5px 10px;
    font-size: 0.88rem;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 500;
    min-width: 60px;
    max-width: 280px;
    transition: all 0.15s;
}
.answer-chip-input:focus {
    outline: none;
    background: rgba(16, 185, 129, 0.14);
    border-color: var(--teal);
    color: #d1fae5;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.answers-edit .sector-title {
    font-size: 0.78rem;
    color: var(--text-dim);
    font-weight: 600;
    margin-top: 4px;
}
.answers-edit .sector-title:first-child { margin-top: 0; }

/* === Mobile adjustments === */
@media (max-width: 640px) {
    .editor-toolbar { top: 64px; padding: 8px 10px; }
    .editor-toolbar-row { flex-wrap: wrap; gap: 8px; }
    .editor-search-wrap { min-width: 100%; }
    .prompt-time-unit { min-width: 46px; }
    .prompt-time-unit input { width: 46px; }
}

/* === Search navigation arrows === */
.search-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.search-nav-btn:hover:not(:disabled) {
    background: rgba(16, 185, 129, 0.18);
    color: var(--teal);
    border-color: var(--line-strong);
}
.search-nav-btn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

/* === Search match highlighting === */
.search-hit {
    outline: 1px solid rgba(250, 204, 21, 0.45);
    outline-offset: 1px;
    background: rgba(250, 204, 21, 0.08) !important;
    border-radius: 6px;
    transition: background 0.2s, outline-color 0.2s, box-shadow 0.2s;
}
.search-hit.quill-wrap {
    background: transparent !important;
}
.search-hit.quill-wrap .ql-container {
    background: rgba(250, 204, 21, 0.08) !important;
}
.search-current {
    outline: 2px solid rgb(250, 204, 21) !important;
    outline-offset: 2px;
    background: rgba(250, 204, 21, 0.22) !important;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.18), 0 8px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 3;
}
.search-current.quill-wrap .ql-container {
    background: rgba(250, 204, 21, 0.22) !important;
}

/* === v2: Prompt row — без общего заголовка, per-row header с номером, Мин/Сек горизонтально === */
.editor-section-prompts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.editor-section-prompts .editor-section-title { display: none !important; }

.prompt-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    padding: 10px !important;
    background: rgba(250, 204, 21, 0.025);
    border-radius: 8px;
    transition: background 0.2s, box-shadow 0.2s;
}
.prompt-row:focus-within {
    background: rgba(250, 204, 21, 0.07) !important;
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.3);
}
.prompt-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}
.prompt-row-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(250, 204, 21, 0.85);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.prompt-rank {
    font-family: 'JetBrains Mono', monospace;
    color: #facc15;
}
.prompt-row-body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.prompt-editor { flex: 1; min-width: 0; }
.prompt-time {
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    padding-top: 36px !important; /* выровнять с editor под toolbar'ом */
    align-items: stretch !important;
}

/* === Унифицированные time-inputs === */
.prompt-time-unit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 56px;
}
.prompt-time-unit label {
    font-size: 0.66rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    font-weight: 600;
}
.prompt-time-unit input {
    width: 56px;
    height: 36px;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    padding: 0 6px;
    font-size: 0.92rem;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
}
.prompt-time-unit input:focus {
    outline: none;
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* === Bonus header: всё в одну линию === */
.editor-section-bonuses .editor-section-title { display: none !important; }
.bonus-card {
    padding: 14px !important;
}
.bonus-header {
    display: flex !important;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.bonus-header-name {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1 1 240px;
    min-width: 0;
}
.bonus-header-name label {
    font-size: 0.66rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.bonus-header-name input {
    height: 36px;
    padding: 0 12px;
    border-radius: 10px;
    background: var(--input);
    border: 1px solid var(--line);
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    width: 100%;
    min-width: 0;
}
.bonus-header-name input:focus {
    outline: none;
    border-color: rgb(20, 184, 190);
    box-shadow: 0 0 0 3px rgba(20, 184, 190, 0.18);
}

/* Бонус/Штраф toggle */
.bonus-kind-toggle {
    display: inline-flex;
    gap: 0;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.2);
    align-self: flex-end;
}
.bonus-kind-btn {
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: 7px;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.bonus-kind-btn:hover { color: var(--text); }
.bonus-kind-btn.is-active {
    background: rgba(20, 184, 190, 0.2);
    color: rgb(20, 184, 190);
    box-shadow: inset 0 0 0 1px rgba(20, 184, 190, 0.45);
}
.bonus-kind-btn[data-value="negative"].is-active {
    background: rgba(255, 125, 125, 0.18);
    color: #ffb4b4;
    box-shadow: inset 0 0 0 1px rgba(255, 125, 125, 0.5);
}

/* Время бонуса: та же геометрия */
.bonus-time-edit {
    display: flex !important;
    gap: 6px;
    align-items: flex-end;
    margin-left: 0 !important;
}
.bonus-time-edit .prompt-time-unit { min-width: 56px; }
.bonus-time-edit .prompt-time-unit input { width: 56px; }

.bonus-negative {
    display: none !important; /* старый бейдж убран, заменён toggle'ом */
}
.bonus-time {
    display: none !important; /* старое статичное время убрано */
}

/* ========= v3: prompt time в шапке, убрать middle focus, тёмные спиннеры, Часы ========= */

/* Dark spinner buttons для всех number inputs */
input[type="number"] {
    color-scheme: dark;
}

/* Prompt row: время перенесено в шапку, тело только с Quill */
.prompt-row {
    padding: 10px 12px !important;
    gap: 8px !important;
}
.prompt-row-head {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0 !important;
}
.prompt-row-title {
    flex: 1;
}
.prompt-row-head-time {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}
.prompt-row-body {
    /* больше не используется — оставим для обратной совместимости */
    display: block;
}
.prompt-row .prompt-time { display: none !important; }

/* Унифицированные time-unit'ы: одинаковая высота (36px) и радиус (10px) */
.time-unit {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 52px;
}
.time-unit label {
    font-size: 0.62rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
    font-weight: 600;
    line-height: 1;
}
.time-unit input {
    width: 52px;
    height: 36px;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    padding: 0 4px;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    color-scheme: dark;
}
.time-unit input:focus {
    outline: none;
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}

/* Убрать middle-level focus (подсветка bonus-card при фокусе внутри) — оставить только outer + inner */
.bonus-card:focus-within {
    border-color: var(--line) !important;
    background: rgba(16, 185, 129, 0.03) !important;
    box-shadow: none !important;
}
.prompt-row:focus-within {
    background: transparent !important;
    box-shadow: none !important;
}

/* === Bonus header v3: все поля 36px, часы + мин + сек === */
.bonus-header-name input {
    height: 36px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
}
.bonus-kind-toggle {
    height: 36px !important;
    border-radius: 10px !important;
    padding: 3px !important;
    align-self: flex-end !important;
}
.bonus-time-edit {
    display: flex !important;
    gap: 6px;
    align-self: flex-end;
    margin-left: 0 !important;
}
.bonus-time-edit .time-unit { min-width: 52px; }
.bonus-time-edit .time-unit input { width: 52px; height: 36px; }

/* Header label выравнивание по высоте toggle */
.bonus-header { align-items: flex-end !important; }

/* ========= v4: bonus header — ровная строка, все поля 40px ========= */
.bonus-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;  /* не flex-end — строго по центру */
    gap: 10px !important;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Label над "Название" мешает выравниванию — делаем placeholder'ом */
.bonus-header-name {
    display: flex !important;
    flex-direction: row !important;   /* label слева от input'а ИЛИ скрываем label */
    align-items: center !important;
    gap: 8px;
    flex: 1 1 220px;
    min-width: 0;
}
.bonus-header-name label {
    font-size: 0.75rem !important;
    color: var(--text-dim) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}
.bonus-header-name input {
    flex: 1;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 14px !important;
    font-size: 0.94rem !important;
    border: 1px solid var(--line);
    background: var(--input);
    color: var(--text);
    min-width: 0;
}

/* Toggle Бонус/Штраф — 40px */
.bonus-kind-toggle {
    height: 40px !important;
    border-radius: 10px !important;
    padding: 3px !important;
    align-self: center !important;
    display: inline-flex !important;
    align-items: stretch !important;
}
.bonus-kind-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 16px !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
}

/* Блок Ч / Мин / Сек — метки СНАРУЖИ слева, поля такой же высоты 40px */
.bonus-time-edit {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
    align-self: center !important;
    margin-left: 0 !important;
}
/* Внутри шапки бонуса переопределяем time-unit: label СЛЕВА от input'а вместо над ним,
   чтобы высота unit'а равнялась высоте input'а (40px) */
.bonus-time-edit .time-unit {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    min-width: 0 !important;
}
.bonus-time-edit .time-unit label {
    text-align: left !important;
    font-size: 0.7rem !important;
    color: var(--text-dim) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.bonus-time-edit .time-unit input {
    width: 56px !important;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 6px !important;
    font-size: 0.92rem !important;
}

/* ========= v5: bonus header — всё в одну строку, labels сверху, поля времени узкие ========= */
.bonus-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

/* Название: label сверху, input уже */
.bonus-header-name {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    flex: 0 1 320px !important;
    min-width: 0;
}
.bonus-header-name label {
    font-size: 0.62rem !important;
    color: var(--text-dim) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-align: left !important;
    line-height: 1;
}
.bonus-header-name input {
    width: 100%;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 0.92rem !important;
}

/* Toggle — на линии низа с input'ом */
.bonus-kind-toggle {
    align-self: flex-end !important;
    height: 40px !important;
}

/* Блок времени: Ч / Мин / Сек, labels сверху, input'ы УЖЕ (26-28px) */
.bonus-time-edit {
    display: flex !important;
    gap: 4px !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    margin-left: 0 !important;
}
.bonus-time-edit .time-unit {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    min-width: 0 !important;
}
.bonus-time-edit .time-unit label {
    text-align: center !important;
    font-size: 0.62rem !important;
    color: var(--text-dim) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
}
.bonus-time-edit .time-unit input {
    width: 30px !important;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 2px !important;
    font-size: 0.9rem !important;
    text-align: center;
    /* Прячем native spinner — поля слишком узкие, стрелки не помещаются */
    -moz-appearance: textfield;
}
.bonus-time-edit .time-unit input::-webkit-outer-spin-button,
.bonus-time-edit .time-unit input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ========= v6: bonus header — строгий nowrap в одну линию ========= */
.bonus-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    gap: 10px !important;
    flex-wrap: nowrap !important; /* НЕ переносить */
    margin-bottom: 14px;
}

/* Название — flex-гибкое, сжимается если мало места */
.bonus-header-name {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 3px !important;
    flex: 1 1 180px !important;
    min-width: 0 !important;
}
.bonus-header-name label {
    font-size: 0.62rem !important;
    color: var(--text-dim) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    text-align: left !important;
    line-height: 1;
}
.bonus-header-name input {
    width: 100% !important;
    min-width: 0 !important;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
    font-size: 0.92rem !important;
}

/* Toggle — не сжимается */
.bonus-kind-toggle {
    flex: 0 0 auto !important;
    align-self: flex-end !important;
    height: 40px !important;
}

/* Блок времени — не сжимается, не растягивается */
.bonus-time-edit {
    display: flex !important;
    gap: 4px !important;
    align-items: flex-end !important;
    align-self: flex-end !important;
    flex: 0 0 auto !important;
    margin-left: 0 !important;
    width: auto !important;
}
.bonus-time-edit .time-unit {
    flex: 0 0 auto !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 3px !important;
    min-width: 0 !important;
    width: 32px !important;
}
.bonus-time-edit .time-unit label {
    text-align: center !important;
    font-size: 0.62rem !important;
    color: var(--text-dim) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1;
    width: 100%;
}
.bonus-time-edit .time-unit input {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 40px !important;
    border-radius: 10px !important;
    padding: 0 2px !important;
    font-size: 0.9rem !important;
    text-align: center !important;
    -moz-appearance: textfield !important;
}

/* На очень узких экранах — разрешаем перенос, но только toggle+время в единый блок */
@media (max-width: 680px) {
    .bonus-header { flex-wrap: wrap !important; }
    .bonus-header-name { flex-basis: 100% !important; }
}

/* ========= v7: одинаковая высота ввода и toggle, шире Ч/Мин/Сек, уже Название ========= */

/* Все поля ввода в шапке бонуса — одинаковая высота 40px с box-sizing */
.bonus-header input,
.bonus-header-name input,
.bonus-time-edit .time-unit input,
.bonus-kind-toggle,
.bonus-kind-btn {
    box-sizing: border-box !important;
    height: 40px !important;
    line-height: 1 !important;
}

/* Toggle: убираем padding чтобы внутренние кнопки были 40px по высоте */
.bonus-kind-toggle {
    padding: 0 !important;
    align-items: stretch !important;
}
.bonus-kind-btn {
    padding: 0 16px !important;
    display: inline-flex;
    align-items: center;
    height: 40px !important;
    border-radius: 10px !important;
}

/* Название — уже (200px гибко) */
.bonus-header-name {
    flex: 0 1 260px !important;
}

/* Ч/Мин/Сек — шире (48px) */
.bonus-time-edit .time-unit,
.bonus-time-edit .time-unit input {
    width: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
}
.bonus-time-edit .time-unit input {
    height: 40px !important;
    padding: 0 4px !important;
    font-size: 0.92rem !important;
}

/* Время-блок — растянуть слегка, между toggle и временем небольшой зазор */
.bonus-time-edit {
    margin-left: 2px !important;
}

/* ========= v8: labels отдельно над полями, чётко видны ========= */
.bonus-header-name {
    gap: 8px !important;
    position: relative;
}
.bonus-header-name label {
    display: block !important;
    padding: 0 2px !important;
    margin: 0 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase;
}

.bonus-time-edit .time-unit {
    gap: 8px !important;
}
.bonus-time-edit .time-unit label {
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase;
}

/* ========= v9: label "Временной" над toggle ========= */
.bonus-kind-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}
.bonus-kind-wrap > label {
    display: block !important;
    padding: 0 2px !important;
    margin: 0 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-align: left !important;
    text-transform: uppercase;
}

/* ========= v10: финальная принудительная унификация — 42px everywhere ========= */
.bonus-header input,
.bonus-header-name input,
.bonus-time-edit .time-unit input,
.bonus-kind-toggle,
.bonus-kind-btn,
.bonus-kind-wrap > .bonus-kind-toggle {
    box-sizing: border-box !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    line-height: 1 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* Toggle без padding, кнопки внутри на всю высоту */
.bonus-kind-toggle {
    padding: 0 !important;
}
.bonus-kind-btn {
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ========= v11: toolbar Quill — выезжает сверху при фокусе в поле ========= */
.quill-wrap .ql-toolbar.ql-snow {
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-bottom: 0 !important;
    opacity: 0;
    transition: max-height 0.22s cubic-bezier(0.2, 0.9, 0.3, 1),
                padding 0.22s ease,
                opacity 0.18s ease 0.04s,
                border-color 0.22s ease;
}
.quill-wrap:focus-within .ql-toolbar.ql-snow {
    max-height: 44px !important;
    padding: 6px 8px !important;
    opacity: 1;
    border-bottom: 1px solid var(--line) !important;
}
/* Чуть приподнять editor когда toolbar скрыт — минимальный padding */
.quill-wrap .ql-container.ql-snow {
    transition: background 0.2s;
}

/* Пикер цвета и tooltip (ссылка/картинка) оставляем видимыми, они родятся абсолютно */
.ql-snow .ql-tooltip,
.ql-snow .ql-picker-options {
    max-height: none !important;
    opacity: 1 !important;
}

/* ========= v12: разделение двух блоков бонуса (Условие / Сообщение) ========= */
.bonus-subsection {
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px dashed var(--line);
    background: transparent;
    transition: border-color 0.2s, background 0.2s;
}
.bonus-subsection:first-child { margin-top: 4px; }
.bonus-subsection:focus-within {
    border-color: rgba(20, 184, 190, 0.45);
    background: rgba(20, 184, 190, 0.02);
    border-style: solid;
}

/* Условие — акцент бирюзовый (как бонус) */
.bonus-subsection-task {
    border-left: 3px solid rgba(20, 184, 190, 0.5);
}

/* Сообщение после — акцент янтарный (как награда) */
.bonus-subsection-help {
    border-left: 3px solid rgba(234, 182, 97, 0.5);
}
.bonus-subsection-help:focus-within {
    border-color: rgba(234, 182, 97, 0.45);
    background: rgba(234, 182, 97, 0.03);
}

.bonus-subsection-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.bonus-subsection-title {
    font-size: 0.76rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.bonus-subsection-task .bonus-subsection-title {
    color: rgb(20, 184, 190);
}
.bonus-subsection-help .bonus-subsection-title {
    color: rgb(234, 182, 97);
}
.bonus-subsection-hint {
    font-size: 0.74rem;
    color: var(--text-dim);
    font-weight: 400;
    font-style: italic;
}

.bonus-subsection .quill-wrap {
    margin-bottom: 0;
}

/* ========= v13: заголовок "Бонус N" + унифицированный стиль подписей ========= */
.bonus-card-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: rgb(20, 184, 190);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding: 0 2px;
}
.bonus-rank {
    font-family: 'JetBrains Mono', monospace;
    color: rgb(20, 184, 190);
}

/* Подсекции (Задание / Сообщение) — одинаковый стиль подписи как "Название", "Временной" */
.bonus-subsection {
    margin-top: 12px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    border-left: none !important;
}
.bonus-subsection:focus-within {
    background: transparent !important;
    border: none !important;
}
.bonus-subsection-label {
    display: block !important;
    padding: 0 2px 8px !important;
    margin: 0 !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase;
}

/* Убираем устаревшие элементы v12 */
.bonus-subsection-head,
.bonus-subsection-title,
.bonus-subsection-hint {
    display: none !important;
}

/* ========= v14: кастомные toolbar-кнопки Quill ========= */
.ql-toolbar.ql-snow button.ql-hr::before {
    content: '—';
    font-weight: 700;
    font-size: 16px;
    color: var(--text-soft);
}
.ql-toolbar.ql-snow button.ql-emoji::before {
    content: '😊';
    font-size: 14px;
}
.ql-toolbar.ql-snow button.ql-coords::before {
    content: '📍';
    font-size: 14px;
}
.ql-toolbar.ql-snow button.ql-spoiler::before {
    content: '👁';
    font-size: 13px;
}
.ql-toolbar.ql-snow button.ql-source::before {
    content: '</>';
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-soft);
}
.ql-toolbar.ql-snow button.ql-hr:hover::before,
.ql-toolbar.ql-snow button.ql-source:hover::before {
    color: var(--teal);
}

/* === Emoji picker popup === */
.emoji-picker-popup {
    position: absolute;
    z-index: 100;
    background: var(--panel-strong, #14201a);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    display: grid;
    grid-template-columns: repeat(10, 28px);
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}
.emoji-picker-item {
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 18px;
    cursor: pointer;
    transition: background 0.12s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emoji-picker-item:hover {
    background: rgba(16, 185, 129, 0.15);
}

/* === HTML source-mode === */
.quill-wrap.source-mode .ql-editor { display: none !important; }
.quill-source-ta {
    display: block;
    width: 100%;
    min-height: 120px;
    max-height: 50vh;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    color: #9fe2c4;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.quill-source-ta:focus {
    background: rgba(0, 0, 0, 0.55);
}
.quill-wrap.source-mode .ql-source::before {
    color: var(--teal) !important;
}
.quill-wrap.source-mode {
    border-color: var(--teal) !important;
}

/* === Drop зона — лёгкая подсветка при перетаскивании === */
.quill-wrap .ql-editor.ql-drag-over,
.quill-wrap.is-dragover {
    background: rgba(16, 185, 129, 0.08);
}

/* Расширенный toolbar — больше места */
.quill-wrap .ql-toolbar.ql-snow {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* ========= v15: фикс выпадающих меню (цвет, фон, списки) поверх текста ========= */
.quill-wrap {
    overflow: visible !important;
}
/* Но toolbar при сворачивании всё ещё клипуется внутри себя */
.quill-wrap .ql-toolbar.ql-snow {
    overflow: hidden !important;
}
.quill-wrap:focus-within .ql-toolbar.ql-snow {
    overflow: visible !important; /* чтобы пикеры выходили наружу */
}

/* Пикеры поверх всего */
.ql-snow .ql-picker-options {
    z-index: 10000 !important;
    background: var(--panel-strong, #14201a) !important;
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    padding: 6px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}
.ql-snow .ql-color-picker .ql-picker-options {
    width: 180px !important;
}
.ql-snow .ql-tooltip {
    z-index: 10000 !important;
}

/* Скругление углов без overflow:hidden */
.quill-wrap .ql-toolbar.ql-snow {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}
.quill-wrap .ql-container.ql-snow {
    border-bottom-left-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}
.quill-wrap:not(:focus-within) .ql-container.ql-snow {
    border-top-left-radius: var(--radius-sm);
    border-top-right-radius: var(--radius-sm);
}

/* ========= v16: сворачиваемая панель "Настройки уровня" ========= */
.level-settings {
    margin-bottom: 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
    transition: border-color 0.18s;
}
.level-settings.open {
    border-color: var(--line-strong);
}
.level-settings-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.84rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s, color 0.15s;
}
.level-settings-toggle:hover {
    background: rgba(16, 185, 129, 0.04);
    color: var(--text);
}
.level-settings-toggle .chev {
    transition: transform 0.2s;
    color: var(--text-dim);
    flex-shrink: 0;
}
.level-settings.open .level-settings-toggle .chev {
    transform: rotate(90deg);
    color: var(--teal);
}
.level-settings-summary {
    margin-left: auto;
    font-size: 0.74rem;
    font-weight: 400;
    color: var(--text-dim);
    font-style: italic;
}
.level-settings-body {
    display: none;
    padding: 6px 16px 18px;
    border-top: 1px solid var(--line);
}
.level-settings.open .level-settings-body {
    display: block;
}
.level-settings-group {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.15);
}
.level-settings-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--teal);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.level-settings-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.level-settings-row:last-child { margin-bottom: 0; }
.level-settings-row-penalty {
    margin-top: 4px;
    padding: 8px 10px;
    background: rgba(234, 182, 97, 0.05);
    border: 1px dashed rgba(234, 182, 97, 0.25);
    border-radius: 8px;
    transition: opacity 0.2s;
}
.level-settings-row-penalty.is-disabled,
.field-inline.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.level-settings-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    align-self: center;
    padding: 0 4px;
}
.level-settings-small {
    margin-top: 6px;
    font-size: 0.72rem;
    color: var(--text-dim);
    font-style: italic;
}
.level-settings-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: var(--text-soft);
    cursor: pointer;
    padding: 0 6px;
    align-self: center;
}
.level-settings-check input[type="checkbox"] {
    accent-color: var(--teal);
    width: 14px;
    height: 14px;
}

/* Inline field (label + input в ряд) */
.field-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.field-inline label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    white-space: nowrap;
}
.field-inline input {
    height: 36px;
    padding: 0 10px;
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-family: 'JetBrains Mono', monospace;
    text-align: center;
    box-sizing: border-box;
    color-scheme: dark;
}
.field-inline .input-wide { width: 70px; }
.field-inline .input-narrow { width: 56px; }
.field-inline input:focus {
    outline: none;
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

/* Segment toggle (Игрок/Команда, Все/N секторов) */
.segment-toggle {
    display: inline-flex;
    gap: 0;
    height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.2);
    align-self: center;
}
.segment-btn {
    padding: 0 14px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-soft);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.segment-btn:hover { color: var(--text); }
.segment-btn.is-active {
    background: rgba(16, 185, 129, 0.2);
    color: var(--teal);
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.45);
}

/* Узкий/широкий time-unit внутри настроек */
.level-settings-row .time-unit { min-width: 48px; }
.level-settings-row .time-unit input { width: 48px; height: 36px; }

/* ========= v17: компактные настройки уровня ========= */

/* Компактные общие отступы */
.level-settings-body { padding: 4px 12px 12px !important; }
.level-settings-group {
    margin-top: 8px !important;
    padding: 10px 12px !important;
}
.level-settings-title { margin-bottom: 8px !important; }
.level-settings-row { margin-bottom: 0 !important; gap: 8px !important; row-gap: 6px !important; }

/* Штраф за автопереход — inline справа */
.ap-penalty-inline {
    display: inline-flex;
    gap: 6px;
    align-items: flex-end;
    padding: 4px 10px;
    border-left: 2px dashed rgba(234, 182, 97, 0.4);
    margin-left: 2px;
    transition: opacity 0.2s;
}
.ap-penalty-inline.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}
/* Убираем устаревший penalty-row */
.level-settings-row-penalty { display: none !important; }

/* Блокировка — всё в одну строку */
.ab-fields {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    transition: opacity 0.2s;
}
.ab-fields.is-disabled {
    opacity: 0.35;
    pointer-events: none;
}

/* === Кастомный чекбокс с тёмным фоном === */
.level-settings-check input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, 0.35) !important;
    cursor: pointer !important;
    position: relative !important;
    flex-shrink: 0;
    transition: all 0.15s;
}
.level-settings-check input[type="checkbox"]:hover {
    border-color: var(--teal);
    background: rgba(16, 185, 129, 0.1) !important;
}
.level-settings-check input[type="checkbox"]:checked {
    background: var(--teal) !important;
    border-color: var(--teal) !important;
}
.level-settings-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 4px;
    width: 4px;
    height: 8px;
    border: solid var(--bg-deep);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Сектор "из N" — hint прямо в field-inline */
.sc-count-field .level-settings-hint {
    font-size: 0.78rem;
    color: var(--text-dim);
    padding: 0;
    align-self: center;
    white-space: nowrap;
}
.sc-count-field input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Компактные time-unit в настройках */
.level-settings-row .time-unit { min-width: 44px !important; gap: 2px !important; }
.level-settings-row .time-unit input { width: 44px !important; height: 34px !important; padding: 0 2px !important; }
.level-settings-row .time-unit label { font-size: 0.58rem !important; }

/* Segment-toggle унифицированная высота 34px (как inputs) */
.level-settings-row .segment-toggle { height: 34px !important; padding: 2px !important; }
.level-settings-row .segment-btn { padding: 0 10px !important; font-size: 0.78rem !important; }

/* field-inline в настройках — 34px высота */
.level-settings-row .field-inline input { height: 34px !important; padding: 0 8px !important; font-size: 0.84rem !important; }
.level-settings-row .field-inline label { font-size: 0.62rem !important; }
.level-settings-row .field-inline .input-narrow { width: 54px !important; }
.level-settings-row .field-inline .input-wide { width: 64px !important; }

/* Убираем верхний margin у первой группы */
.level-settings-group:first-child { margin-top: 4px !important; }

/* ========= v18: унифицированная колонка label+control, всё на одной оси ========= */
.level-settings-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.field-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}
.field-col-label {
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    color: var(--text-dim) !important;
    letter-spacing: 0.08em !important;
    line-height: 1 !important;
    text-transform: uppercase;
    text-align: center;
    padding: 0 2px;
    min-height: 10px;
    white-space: nowrap;
}
/* Всё, что "control" — строго 34px */
.field-col > input,
.field-col > .segment-toggle,
.field-col > .level-settings-hint,
.field-col > .level-settings-check {
    height: 34px !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
}
.field-col > input {
    background: var(--input);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--text);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    text-align: center;
    padding: 0 4px !important;
    color-scheme: dark;
}
.field-col > input:focus {
    outline: none;
    border-color: var(--line-strong);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}
.field-col > input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Segment-toggle внутри field-col — тоже 34px */
.field-col > .segment-toggle {
    padding: 2px !important;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
}
.field-col > .segment-toggle .segment-btn {
    padding: 0 12px !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    height: auto !important;
}

/* Ширина input'ов в колонке */
.field-col > input.input-narrow { width: 52px !important; }
.field-col > input.input-wide { width: 72px !important; }

/* Разделитель "за" */
.field-col-sep {
    min-width: 18px;
}
.field-col-sep .level-settings-hint {
    justify-content: center;
    background: transparent;
    font-size: 0.78rem;
    color: var(--text-dim);
}

/* field-col с чекбоксом штрафа */
.field-col-check {
    justify-content: flex-end;
}
.field-col-check .level-settings-check {
    padding: 0 8px !important;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
}

/* Penalty inline — выравнивается с остальными через field-col внутри */
.ap-penalty-inline {
    display: inline-flex;
    gap: 6px;
    padding: 0 0 0 10px;
    border-left: 2px dashed rgba(234, 182, 97, 0.4);
    margin-left: 2px;
    align-items: stretch;
    transition: opacity 0.2s;
}

/* ab-fields — тоже стретч */
.ab-fields {
    display: inline-flex;
    gap: 6px;
    align-items: stretch;
    flex-wrap: wrap;
}

/* Override старых time-unit правил внутри field-col */
.level-settings-row .time-unit { display: none !important; }

/* sc-count-field — горизонтально label-над-input */
.sc-count-field { align-items: flex-start !important; }

/* ========= v19: segment-toggle — уменьшаем вертикальные отступы внутри ========= */
.segment-toggle {
    padding: 1px !important;
    align-items: stretch !important;
}
.segment-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
}
.field-col > .segment-toggle { padding: 1px !important; }
.field-col > .segment-toggle .segment-btn { padding: 0 12px !important; }
.bonus-kind-toggle { padding: 1px !important; }
.bonus-kind-btn { height: 100% !important; min-height: 0 !important; padding: 0 14px !important; }

/* ========= v20: усиленная специфичность для segment-toggle padding ========= */
.level-settings-row .segment-toggle,
.level-settings-row .field-col > .segment-toggle,
.bonus-header .bonus-kind-toggle {
    padding: 1px !important;
    align-items: stretch !important;
}
.level-settings-row .segment-toggle .segment-btn,
.level-settings-row .field-col .segment-btn,
.bonus-header .bonus-kind-btn {
    height: 100% !important;
    min-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
}

/* ========= v21: Сектор + ответы в одной строке ========= */
.sector-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 4px 0;
    border-bottom: 1px dashed var(--line);
}
.sector-row:last-child { border-bottom: none; }

.sector-row > .sector-title {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 6px;
    color: var(--teal);
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    margin: 0 !important;
}

.sector-row .answer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

/* Делаем answers-edit компактнее (без больших gap'ов между секторами) */
.answers-edit { gap: 2px !important; }

/* ========= v22: сектор — muted-текст, а не pill как чип ========= */
.sector-row > .sector-title {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    color: var(--text-dim) !important;
    font-size: 0.76rem !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    min-width: 70px;
}