/* ============================================================
         IDE PAGE RESET & BASE
      ============================================================ */
      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html,
      body.ide-page {
        height: 100%;
        overflow: hidden;
      }

      body.ide-page {
        display: flex;
        flex-direction: column;
        font-family: "Roboto", sans-serif;
        background: var(--bg-primary);
        color: var(--text-primary);
        margin: 0;
      }

      /* style.css ≤1024px даёт body margin-left: 84px под скрытый .sidebar */
      @media (max-width: 1024px) {
        body.ide-page,
        body.practice-fe-header {
          margin: 0 !important;
        }
      }

      /* ============================================================
         IDE HEADER
      ============================================================ */
      .ide-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 16px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        z-index: 200;
        gap: 12px;
      }

      .ide-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
      }

      .ide-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        flex-shrink: 0;
      }

      .ide-logo-img {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        object-fit: cover;
      }

      .ide-logo-text {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 0.5px;
      }

      .ide-header-sep {
        width: 1px;
        height: 20px;
        background: var(--border-color);
        flex-shrink: 0;
      }

      .ide-lesson-nav-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        color: var(--text-secondary);
        font-size: 13px;
        padding: 4px 10px;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
        white-space: nowrap;
      }

      .ide-lesson-nav-btn:hover {
        color: var(--text-primary);
        border-color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.04);
      }

      .ide-breadcrumb {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--text-secondary);
        min-width: 0;
        overflow: hidden;
      }

      .ide-breadcrumb a {
        color: var(--text-secondary);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s;
      }

      .ide-breadcrumb a:hover {
        color: var(--text-primary);
      }

      .ide-breadcrumb-sep {
        color: var(--text-muted);
        flex-shrink: 0;
      }

      .ide-breadcrumb-current {
        color: var(--text-primary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .ide-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      .ide-header-btn {
        display: flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 13px;
        padding: 6px 10px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.2s, background 0.2s;
        white-space: nowrap;
      }

      /* questions.html временно скрыт (flex перебивает [hidden]) */
      .ide-header-btn[href*="questions/questions.html"],
      .ide-header-btn[hidden] {
        display: none !important;
      }

      .ide-header-btn:hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.06);
      }

      .ide-header-btn--donate {
        background: rgba(255, 197, 1, 0.1);
        color: #ffc501;
        border: 1px solid rgba(255, 197, 1, 0.25);
      }

      .ide-header-btn--donate:hover {
        background: rgba(255, 197, 1, 0.18);
        color: #ffc501;
      }

      .ide-theme-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 14px;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
      }

      .ide-theme-btn:hover {
        color: var(--text-primary);
        border-color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.04);
      }

      /* Burger for mobile */
      .ide-burger-btn {
        display: none;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 16px;
        transition: color 0.2s;
      }

      /* ============================================================
         IDE WORKSPACE (main split layout)
      ============================================================ */
      .ide-workspace {
        display: flex;
        flex: 1;
        min-height: 0;
        overflow: hidden;
        background: var(--bg-primary);
      }

      /* ============================================================
         LEFT PANE - Editor + Console
      ============================================================ */
      .ide-left {
        display: flex;
        flex-direction: column;
        flex: 0 0 50%;
        min-width: 240px;
        max-width: 80%;
        overflow: hidden;
        border-right: 1px solid var(--border-color);
        background: var(--bg-primary);
      }

      /* Editor top bar */
      .ide-editor-header {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        height: 40px;
        flex-shrink: 0;
      }

      .ide-editor-tabs {
        display: flex;
        align-items: flex-end;
        height: 100%;
        padding-left: 4px;
      }

      .ide-editor-tab {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 0 14px;
        height: 36px;
        font-size: 13px;
        color: var(--text-secondary);
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        cursor: default;
        user-select: none;
      }

      /* Вкладки слева: Пишем HTML | Задание (кнопки) */
      .ide-editor-tab--btn {
        cursor: pointer;
        font: inherit;
        font-size: 13px;
        background: transparent;
        margin: 0;
        outline: none;
      }

      .ide-editor-tab--btn:focus-visible {
        box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.45);
        z-index: 1;
      }

      /* Фокус с скрипта (старт на «Задание») - без второй «обводки», кольцо только для клавиатуры */
      .ide-left .ide-editor-tab--btn:focus:not(:focus-visible) {
        outline: none;
        box-shadow: none;
      }

      .ide-editor-tab--btn:not(.ide-editor-tab--active):hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.04);
      }

      [data-theme="light"] .ide-editor-tab--btn:not(.ide-editor-tab--active):hover {
        background: rgba(0, 0, 0, 0.04);
      }

      /* Нижняя панель «Задание» в левой колонке */
      .ide-task-drawer {
        display: flex;
        flex-direction: column;
        flex: 0 1 min(42vh, 340px);
        max-height: min(42vh, 340px);
        min-height: 120px;
        border-top: 1px solid var(--border-color);
        background: var(--bg-primary);
        min-width: 0;
        overflow: hidden;
        transition:
          max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1),
          min-height 0.4s cubic-bezier(0.33, 1, 0.68, 1),
          flex-basis 0.4s cubic-bezier(0.33, 1, 0.68, 1);
      }

      .ide-left.ide-task-drawer--collapsed .ide-task-drawer {
        flex: 0 0 40px !important;
        max-height: 40px !important;
        min-height: 40px !important;
        overflow: hidden;
      }

      .ide-task-drawer-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        height: 40px;
        padding: 0 10px 0 14px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        gap: 10px;
      }

      .ide-left.ide-task-drawer--collapsed .ide-task-drawer-bar {
        border-bottom-color: transparent;
      }

      .ide-task-drawer-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 600;
        color: var(--text-primary);
        min-width: 0;
      }

      .ide-task-drawer-title i {
        color: #4fc3f7;
        font-size: 13px;
        flex-shrink: 0;
      }

      .ide-task-drawer-toggle-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 5px 11px;
        font: inherit;
        font-size: 12px;
        font-weight: 600;
        color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid var(--border-color);
        border-radius: 6px;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
      }

      .ide-task-drawer-toggle-btn:hover {
        color: var(--text-primary);
        border-color: var(--text-muted);
        background: rgba(255, 255, 255, 0.1);
      }

      [data-theme="light"] .ide-task-drawer-toggle-btn {
        background: rgba(0, 0, 0, 0.04);
      }

      [data-theme="light"] .ide-task-drawer-toggle-btn:hover {
        background: rgba(0, 0, 0, 0.07);
      }

      .ide-task-drawer-toggle-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.45);
      }

      .ide-task-drawer-chevron {
        font-size: 11px;
        transition: transform 0.35s cubic-bezier(0.33, 1, 0.68, 1);
      }

      .ide-left.ide-task-drawer--collapsed .ide-task-drawer-chevron {
        transform: rotate(-90deg);
      }

      .ide-task-drawer-body {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition:
          opacity 0.28s ease,
          transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
          max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1),
          visibility 0s linear 0s;
      }

      .ide-left.ide-task-drawer--collapsed .ide-task-drawer-body {
        flex: 0 0 0;
        max-height: 0;
        min-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        visibility: hidden;
        transition:
          opacity 0.28s ease,
          transform 0.35s cubic-bezier(0.33, 1, 0.68, 1),
          max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1),
          visibility 0s linear 0.32s;
      }

      .ide-task-resizer {
        height: 4px;
        background: var(--border-color);
        cursor: row-resize;
        flex-shrink: 0;
        transition:
          background 0.15s,
          height 0.35s cubic-bezier(0.33, 1, 0.68, 1),
          opacity 0.28s ease;
      }

      .ide-left.ide-task-drawer--collapsed .ide-task-resizer {
        height: 0;
        opacity: 0;
        pointer-events: none;
      }

      .ide-task-resizer:hover,
      .ide-task-resizer--active {
        background: #4fc3f7;
      }

      .ide-task-section--drawer {
        min-height: 0;
      }

      .ide-task-section--drawer .ide-task-content {
        padding: 16px 20px 24px;
      }

      .ide-editor-tab--active {
        background: #1e1e1e;
        color: var(--text-primary);
        border-color: var(--border-color);
        border-bottom-color: #1e1e1e;
      }

      [data-theme="light"] .ide-editor-tab--active {
        background: #ffffff;
        border-bottom-color: #ffffff;
      }

      .ide-editor-tab i {
        font-size: 12px;
        color: #4fc3f7;
      }

      .ide-editor-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 0 8px 0 10px;
        flex: 1;
        min-width: 0;
      }

      .ide-toolbar-links {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
      }

      .ide-toolbar-quick-link {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 3px 8px;
        font-size: 11px;
        font-weight: 500;
        color: var(--text-muted);
        text-decoration: none;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        white-space: nowrap;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
      }

      /* «Ошибка в коде» - едва заметнее соседней ссылки */
      .ide-toolbar-links .ide-toolbar-quick-link:first-child {
        border-color: rgba(255, 152, 0, 0.18);
      }

      .ide-toolbar-quick-link:hover {
        color: var(--text-secondary);
        border-color: var(--text-muted);
        background: rgba(255, 255, 255, 0.04);
      }

      .ide-toolbar-links .ide-toolbar-quick-link:first-child:hover {
        border-color: rgba(255, 152, 0, 0.32);
      }

      [data-theme="light"] .ide-toolbar-quick-link:hover {
        background: rgba(0, 0, 0, 0.04);
      }

      [data-theme="light"] .ide-toolbar-links .ide-toolbar-quick-link:first-child {
        border-color: rgba(230, 81, 0, 0.18);
      }

      [data-theme="light"] .ide-toolbar-links .ide-toolbar-quick-link:first-child:hover {
        border-color: rgba(230, 81, 0, 0.3);
      }

      .ide-toolbar-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        margin-left: auto;
      }

      .ide-editor-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        background: none;
        border: none;
        color: var(--text-secondary);
        border-radius: 4px;
        cursor: pointer;
        font-size: 13px;
        transition: color 0.2s, background 0.2s;
      }

      .ide-editor-action-btn:hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.06);
      }

      .ide-editor-kbd-hint {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: var(--text-muted);
        padding: 0 4px;
        white-space: nowrap;
        user-select: none;
      }

      .ide-editor-kbd-hint__dash {
        color: var(--text-muted);
        font-weight: 600;
        line-height: 1;
      }

      .ide-editor-hint-icon {
        pointer-events: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 26px;
        min-height: 26px;
        padding: 4px 8px;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--text-secondary);
        cursor: default;
        box-sizing: border-box;
      }

      [data-theme="light"] .ide-editor-hint-icon {
        background: rgba(0, 0, 0, 0.04);
      }

      .ide-editor-hint-icon i {
        font-size: 10px;
        line-height: 1;
        color: inherit;
      }

      .ide-editor-kbd-hint--reset,
      .ide-editor-kbd-hint--copy {
        margin-right: 0;
        padding-right: 0;
        gap: 4px;
      }

      /* Тире ближе к иконке: сжимаем стандартный gap у .ide-editor-actions (8px) */
      .ide-editor-kbd-hint--reset + .ide-editor-reset-btn,
      .ide-editor-kbd-hint--copy + .ide-editor-copy-btn {
        margin-left: -4px;
      }

      .ide-kbd {
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid var(--border-color);
        border-radius: 3px;
        padding: 1px 5px;
        font-size: 10px;
        color: var(--text-secondary);
        font-family: inherit;
      }

      /* Monaco Editor fill */
      .ide-editor-body {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        background: #1e1e1e;
      }

      [data-theme="light"] .ide-editor-body {
        background: #ffffff;
      }

      /* Monaco: убираем узкую полосу overview-ruler у правого скролла */
      #monaco-editor-container .decorationsOverviewRuler {
        display: none !important;
        width: 0 !important;
        visibility: hidden !important;
      }

      /* Тихий переключатель: выключить HTML-подсказки */
      .ide-html-hover-toggle {
        position: absolute;
        right: 8px;
        bottom: 18px;
        z-index: 6;
        display: inline-flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        max-width: calc(100% - 16px);
        padding: 2px 4px 2px 6px;
        border-radius: 4px;
        background: transparent;
        opacity: 0.58;
        pointer-events: auto;
        user-select: none;
        transition: opacity 0.15s ease;
      }

      .ide-html-hover-toggle:hover,
      .ide-html-hover-toggle:focus-within {
        opacity: 0.88;
      }

      .ide-html-hover-toggle__label {
        margin: 0;
        padding: 0;
        display: block;
        font-size: 10.5px;
        line-height: 12px;
        height: 12px;
        font-weight: 400;
        letter-spacing: 0.01em;
        color: rgba(148, 163, 184, 0.82);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      [data-theme="light"] .ide-html-hover-toggle__label {
        color: rgba(100, 116, 139, 0.78);
      }

      .ide-html-hover-toggle__switch {
        position: relative;
        box-sizing: border-box;
        flex: 0 0 auto;
        display: block;
        width: 22px;
        height: 12px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(148, 163, 184, 0.22);
        border-radius: 999px;
        background: rgba(71, 85, 105, 0.28);
        cursor: pointer;
        line-height: 0;
        font-size: 0;
        appearance: none;
        -webkit-appearance: none;
        vertical-align: middle;
        transition:
          background 0.15s ease,
          border-color 0.15s ease;
      }

      .ide-html-hover-toggle__switch:hover {
        border-color: rgba(148, 163, 184, 0.35);
        background: rgba(71, 85, 105, 0.4);
      }

      .ide-html-hover-toggle__switch:focus-visible {
        outline: 1px solid rgba(148, 163, 184, 0.4);
        outline-offset: 1px;
      }

      .ide-html-hover-toggle__switch.is-on {
        background: rgba(100, 116, 139, 0.42);
        border-color: rgba(148, 163, 184, 0.32);
      }

      .ide-html-hover-toggle__thumb {
        position: absolute;
        top: 50%;
        left: 1px;
        width: 8px;
        height: 8px;
        margin: 0;
        border-radius: 50%;
        background: rgba(203, 213, 225, 0.55);
        transform: translateY(-50%);
        transition:
          left 0.15s ease,
          background 0.15s ease;
        pointer-events: none;
      }

      .ide-html-hover-toggle__switch.is-on .ide-html-hover-toggle__thumb {
        left: 11px;
        transform: translateY(-50%);
        background: rgba(226, 232, 240, 0.75);
      }

      [data-theme="light"] .ide-html-hover-toggle__switch {
        background: rgba(148, 163, 184, 0.18);
        border-color: rgba(148, 163, 184, 0.28);
      }

      [data-theme="light"] .ide-html-hover-toggle__thumb {
        background: rgba(241, 245, 249, 0.85);
      }

      [data-theme="light"] .ide-html-hover-toggle__switch.is-on {
        background: rgba(148, 163, 184, 0.35);
      }

      .ide-html-hover-toggle.is-disabled-hints .ide-html-hover-toggle__label {
        color: rgba(148, 163, 184, 0.45);
      }

      @media (max-width: 720px) {
        .ide-html-hover-toggle__label {
          max-width: 110px;
        }
      }

      /*
        IntelliSense: глобальный .main из style.css (min-height: 100vh, padding)
        попадает в .suggest-widget .main и делает строки пустыми.
      */
      .monaco-editor .suggest-widget .monaco-list-row .contents,
      .monaco-editor .suggest-widget .monaco-list-row .contents > .main,
      .monaco-editor .suggest-widget .monaco-list-row .contents > .left,
      .monaco-editor .suggest-widget .monaco-list-row .contents > .right {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: auto !important;
        overflow: hidden !important;
        position: static !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
      }

      .monaco-editor .suggest-widget .monaco-list-row .contents {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        flex: 1 1 auto !important;
      }

      .monaco-editor .suggest-widget .monaco-list-row .contents > .main {
        display: flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        min-width: 0 !important;
        color: inherit !important;
      }

      .monaco-editor .suggest-widget .monaco-list-row .monaco-icon-label,
      .monaco-editor .suggest-widget .monaco-list-row .monaco-icon-name-container,
      .monaco-editor .suggest-widget .monaco-list-row .monaco-highlighted-label,
      .monaco-editor .suggest-widget .monaco-list-row .label-name {
        color: inherit !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
      }

      .monaco-editor .suggest-widget {
        z-index: 50 !important;
      }

      /* Console resize handle */
      .ide-console-resizer {
        height: 4px;
        background: var(--border-color);
        cursor: row-resize;
        flex-shrink: 0;
        transition: background 0.15s;
        position: relative;
      }

      .ide-console-resizer:hover,
      .ide-console-resizer--active {
        background: #4fc3f7;
      }

      /* Console panel */
      .ide-console {
        display: flex;
        flex-direction: column;
        height: 200px;
        min-height: 60px;
        max-height: 70%;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
      }

      .ide-console-tabs-bar {
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
        background: var(--bg-secondary);
        height: 34px;
        padding: 0 4px;
        flex-shrink: 0;
      }

      .ide-console-tab {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 34px;
        padding: 0 12px;
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--text-secondary);
        font-size: 12px;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s;
        white-space: nowrap;
      }

      .ide-console-tab:hover {
        color: var(--text-primary);
      }

      .ide-console-tab--active {
        color: var(--text-primary);
        border-bottom-color: #4fc3f7;
      }

      .ide-console-tab-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border-color);
      }

      .ide-console-tab--active .ide-console-tab-dot {
        background: #4fc3f7;
      }

      .ide-console-clear-btn {
        margin-left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        background: none;
        border: none;
        color: var(--text-muted);
        border-radius: 4px;
        cursor: pointer;
        font-size: 12px;
        transition: color 0.2s, background 0.2s;
      }

      .ide-console-clear-btn:hover {
        color: #e74c3c;
        background: rgba(231, 76, 60, 0.08);
      }

      .ide-console-body {
        flex: 1;
        overflow-y: auto;
        padding: 10px 16px;
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 13px;
        line-height: 1.55;
        scrollbar-color: #6c7cff transparent;
      }

      .ide-console-body::-webkit-scrollbar {
        width: 6px;
      }

      .ide-console-body::-webkit-scrollbar-track {
        background: transparent;
      }

      .ide-console-body::-webkit-scrollbar-thumb {
        background: #6c7cff;
        border-radius: 3px;
      }

      /* Console output items */
      .console-line {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        padding: 3px 0;
      }

      .console-line--input {
        color: var(--text-muted);
      }

      .console-line--output {
        color: #81c784;
      }

      .console-line--success {
        margin-top: 10px;
        padding: 12px 14px 12px 12px;
        align-items: center;
        gap: 12px;
        color: #a5d6a7;
        font-weight: 600;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(46, 125, 50, 0.22) 0%, rgba(27, 94, 32, 0.12) 100%);
        border: 1px solid rgba(129, 199, 132, 0.35);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
      }

      .console-line--success i {
        font-size: 22px;
        color: #81c784;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
      }

      [data-theme="light"] .console-line--success {
        color: #2e7d32;
        background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
        border-color: rgba(56, 142, 60, 0.35);
        box-shadow: 0 4px 16px rgba(46, 125, 80, 0.12);
      }

      [data-theme="light"] .console-line--success i {
        color: #43a047;
        filter: none;
      }

      .console-line--error {
        margin-top: 10px;
        padding: 12px 14px 12px 12px;
        align-items: flex-start;
        gap: 12px;
        color: #ffcdd2;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(183, 28, 28, 0.35) 0%, rgba(97, 17, 21, 0.25) 100%);
        border: 1px solid rgba(239, 154, 154, 0.35);
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      }

      .console-line--error > i {
        font-size: 20px;
        color: #ef9a9a;
        margin-top: 2px;
        flex-shrink: 0;
      }

      [data-theme="light"] .console-line--error {
        color: #b71c1c;
        background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
        border-color: rgba(229, 115, 115, 0.45);
        box-shadow: 0 4px 16px rgba(198, 40, 40, 0.1);
      }

      [data-theme="light"] .console-line--error > i {
        color: #e53935;
      }

      .console-line--error-text {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
      }

      .console-line--error-details {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.65);
        font-weight: 500;
      }

      [data-theme="light"] .console-line--error-details {
        color: var(--text-muted);
      }

      .console-line--error-expected {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.72);
        line-height: 1.55;
      }

      [data-theme="light"] .console-line--error-expected {
        color: var(--text-secondary);
      }

      .console-line--error-expected code {
        background: rgba(0, 0, 0, 0.2);
        padding: 2px 6px;
        border-radius: 6px;
        font-family: inherit;
        font-size: 11px;
      }

      [data-theme="light"] .console-line--error-expected code {
        background: rgba(0, 0, 0, 0.06);
      }

      .console-prompt {
        color: var(--text-muted);
        flex-shrink: 0;
      }

      .ide-console-welcome {
        display: flex;
        align-items: center;
        gap: 8px;
        color: var(--text-muted);
        font-size: 13px;
        padding: 6px 0;
      }

      /* ============================================================
         HORIZONTAL RESIZER
      ============================================================ */
      .ide-resizer {
        flex: 0 0 6px;
        width: 6px;
        min-width: 6px;
        max-width: 6px;
        margin: 0;
        flex-shrink: 0;
        background: var(--border-color);
        cursor: col-resize;
        touch-action: none;
        z-index: 52;
        transition: background 0.15s;
        position: relative;
        align-self: stretch;
      }

      .ide-resizer:hover,
      .ide-resizer--active {
        background: #4fc3f7;
      }

      /* ============================================================
         TOASTIFY (CDN) - нейтральный «стеклянный» серый (без красных карточек и кругов).
         #ide-toast-host на document.body (JS переносит из preview) - справа сверху от экрана,
         вне transform: scale предпросмотра, чтобы тосты были видны при 50%/75%.
      ============================================================ */
      .ide-toast-host {
        position: fixed;
        top: 56px;
        right: 12px;
        bottom: auto;
        left: auto;
        width: min(520px, calc(100vw - 24px));
        max-height: min(72vh, 480px);
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 99999;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        pointer-events: none;
      }

      /* Сброс inline fixed/transform Toastify: стек внутри viewport-хоста */
      .ide-toast-host .toastify.ide-toastify {
        position: relative !important;
        inset: unset !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        margin: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        transform: translate3d(0, -6px, 0) !important;
      }

      .ide-toast-host .toastify.ide-toastify.on {
        transform: translate3d(0, 0, 0) !important;
      }

      .ide-toast-host .toastify.ide-toastify,
      .ide-toast-host .toast-close,
      .ide-toast-host .ide-toast {
        pointer-events: auto;
      }

      .toastify.ide-toastify {
        position: fixed !important;
        overflow: visible !important;
        cursor: default !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        font-family: "Roboto", sans-serif !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        border-radius: 12px !important;
        padding: 16px 48px 14px 18px !important;
        min-width: min(320px, calc(100vw - 32px)) !important;
        max-width: min(520px, calc(100vw - 32px)) !important;
        width: max-content !important;
        color: #e2e8f0 !important;
        background: linear-gradient(
          160deg,
          rgba(38, 40, 44, 0.97) 0%,
          rgba(28, 30, 34, 0.99) 100%
        ) !important;
        border: 1px solid rgba(148, 163, 184, 0.22) !important;
        border-left: 1px solid rgba(148, 163, 184, 0.22) !important;
        backdrop-filter: blur(16px) saturate(120%) !important;
        -webkit-backdrop-filter: blur(16px) saturate(120%) !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
        box-sizing: border-box !important;
        opacity: 0 !important;
        transform: translate3d(0, -8px, 0) !important;
        transition:
          opacity 0.2s cubic-bezier(0.22, 1, 0.36, 1),
          transform 0.2s cubic-bezier(0.22, 1, 0.36, 1) !important;
        animation: none !important;
      }

      .toastify.ide-toastify.on {
        opacity: 1 !important;
        transform: translate3d(0, 0, 0) !important;
      }

      .toastify.ide-toastify::before {
        content: none !important;
        display: none !important;
      }

      /*
       * Успех / ошибка как в 1С: тёмный фон по центру, цветная полоска только по краю.
       * Не заливать всё окно зелёным/красным.
       */
      .toastify.ide-toastify.ide-toastify--success {
        color: #e2e8f0 !important;
        background: linear-gradient(
          160deg,
          rgba(38, 40, 44, 0.97) 0%,
          rgba(28, 30, 34, 0.99) 100%
        ) !important;
        border: 1px solid rgba(76, 175, 80, 0.85) !important;
        border-left: 1px solid rgba(76, 175, 80, 0.85) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 0 14px rgba(76, 175, 80, 0.14) !important;
      }

      .toastify.ide-toastify.ide-toastify--error {
        color: #e2e8f0 !important;
        background: linear-gradient(
          160deg,
          rgba(38, 40, 44, 0.97) 0%,
          rgba(28, 30, 34, 0.99) 100%
        ) !important;
        border: 1px solid rgba(239, 83, 80, 0.85) !important;
        border-left: 1px solid rgba(239, 83, 80, 0.85) !important;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 0 14px rgba(239, 83, 80, 0.14) !important;
      }

      [data-theme="light"] .toastify.ide-toastify {
        color: #1e293b !important;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        border: 1px solid rgba(100, 116, 139, 0.22) !important;
        border-left: 1px solid rgba(100, 116, 139, 0.22) !important;
        box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35) !important;
      }

      [data-theme="light"] .toastify.ide-toastify.ide-toastify--success {
        color: #1e293b !important;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        border: 1px solid rgba(76, 175, 80, 0.9) !important;
        border-left: 1px solid rgba(76, 175, 80, 0.9) !important;
        box-shadow: 0 0 0 1px rgba(76, 175, 80, 0.18) !important;
      }

      [data-theme="light"] .toastify.ide-toastify.ide-toastify--error {
        color: #1e293b !important;
        background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
        border: 1px solid rgba(239, 83, 80, 0.9) !important;
        border-left: 1px solid rgba(239, 83, 80, 0.9) !important;
        box-shadow: 0 0 0 1px rgba(239, 83, 80, 0.18) !important;
      }

      .toastify.ide-toastify .toast-close {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        z-index: 6 !important;
        width: auto !important;
        min-width: 28px !important;
        height: 28px !important;
        margin: 0 !important;
        padding: 0 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: none !important;
        border-radius: 6px !important;
        background: transparent !important;
        color: inherit !important;
        opacity: 0.45 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 400 !important;
        transition:
          opacity 0.2s,
          background 0.2s !important;
      }

      .toastify.ide-toastify .toast-close:hover {
        opacity: 0.95 !important;
        background: rgba(255, 255, 255, 0.06) !important;
        transform: none !important;
      }

      [data-theme="light"] .toastify.ide-toastify .toast-close:hover {
        background: rgba(15, 23, 42, 0.06) !important;
      }

      .ide-toastify-rich {
        position: relative;
        z-index: 0;
        padding-right: 8px;
        max-width: 100%;
      }

      .ide-toastify-rich__title {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 6px;
        line-height: 1.4;
        letter-spacing: 0.01em;
      }

      .ide-toastify-rich__msg {
        font-size: 13px;
        font-weight: 400;
        opacity: 0.88;
        line-height: 1.65;
      }

      .ide-toastify-rich__expected {
        margin-top: 12px;
        font-size: 12px;
        opacity: 0.78;
        line-height: 1.5;
      }

      .ide-toastify-rich__code {
        display: block;
        width: fit-content;
        max-width: 100%;
        padding: 6px 10px;
        margin-top: 6px;
        border-radius: 6px;
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.5;
        color: inherit;
        opacity: 1 !important;
        background: rgba(148, 163, 184, 0.12);
        border: 1px solid rgba(148, 163, 184, 0.22);
        box-sizing: border-box;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      [data-theme="light"] .ide-toastify-rich__code {
        background: rgba(71, 85, 105, 0.08);
        border-color: rgba(71, 85, 105, 0.16);
      }

      /* Countdown + progress: пауза при наведении (см. bindIdeToastAutoHide) */
      .ide-toastify-timer {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid rgba(148, 163, 184, 0.18);
      }

      .ide-toastify-timer__track {
        width: 100%;
        height: 3px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.2);
        overflow: hidden;
      }

      .ide-toastify-timer__bar {
        height: 100%;
        width: 100%;
        border-radius: inherit;
        background: rgba(148, 163, 184, 0.75);
      }

      .ide-toastify-timer__label {
        font-size: 11px;
        line-height: 1.3;
        opacity: 0.72;
        color: inherit;
      }

      .ide-toastify-timer__sec {
        font-weight: 700;
        font-variant-numeric: tabular-nums;
      }

      .ide-toastify-timer--fallback {
        flex-basis: 100%;
        margin-top: 6px;
        padding-top: 0;
        border-top: none;
        font-size: 11px;
        opacity: 0.72;
      }

      [data-theme="light"] .ide-toastify-timer {
        border-top-color: rgba(15, 23, 42, 0.1);
      }

      [data-theme="light"] .ide-toastify-timer__track {
        background: rgba(15, 23, 42, 0.08);
      }

      [data-theme="light"] .ide-toastify-timer__bar {
        background: rgba(15, 23, 42, 0.35);
      }

      /* Без translate: Toastify сам задаёт transform для позиции в углу. */
      @keyframes ide-toastify-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      /* Fallback без Toastify */
      .ide-toast {
        pointer-events: auto;
        display: flex;
        align-items: flex-start;
        gap: 12px;
        max-width: min(380px, calc(100vw - 32px));
        padding: 14px 18px;
        border-radius: 10px;
        font-size: 14px;
        line-height: 1.5;
        font-weight: 400;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1);
        animation: ide-toast-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
      }

      .ide-toast i {
        margin-top: 2px;
        font-size: 18px;
        flex-shrink: 0;
      }

      .ide-toast--success {
        color: #4ade80;
        background: rgba(16, 24, 16, 0.85);
        border: 1px solid rgba(74, 222, 128, 0.2);
      }

      .ide-toast--error {
        color: #f87171;
        background: rgba(24, 16, 16, 0.85);
        border: 1px solid rgba(248, 113, 113, 0.2);
      }

      [data-theme="light"] .ide-toast--success {
        color: #16a34a;
        background: rgba(240, 253, 244, 0.9);
        border: 1px solid rgba(187, 247, 208, 0.8);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
      }

      [data-theme="light"] .ide-toast--error {
        color: #dc2626;
        background: rgba(254, 242, 242, 0.9);
        border: 1px solid rgba(254, 202, 202, 0.8);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
      }

      @keyframes ide-toast-in {
        from {
          opacity: 0;
          transform: translateY(-8px) scale(0.96);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      /* ============================================================
         RIGHT PANE - Task description
      ============================================================ */
      .ide-right {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: 240px;
        overflow: hidden;
        background: var(--bg-primary);
      }

      /* Task top bar */
      .ide-task-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        padding: 0 20px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        gap: 12px;
      }

      .ide-task-breadcrumb {
        display: flex;
        align-items: center;
        gap: 4px;
        font-size: 12px;
        color: var(--text-muted);
        min-width: 0;
        overflow: hidden;
      }

      .ide-task-breadcrumb a {
        color: var(--text-muted);
        text-decoration: none;
        white-space: nowrap;
        transition: color 0.2s;
      }

      .ide-task-breadcrumb a:hover {
        color: var(--text-primary);
      }

      .ide-task-breadcrumb-sep {
        flex-shrink: 0;
      }

      .ide-task-progress {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        font-size: 12px;
        color: var(--text-muted);
        white-space: nowrap;
      }

      .ide-task-progress-dots {
        display: flex;
        gap: 4px;
      }

      .ide-task-progress-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--border-color);
        transition: background 0.2s;
      }

      .ide-task-progress-dot--active {
        background: #4fc3f7;
      }

      .ide-task-progress-dot--done {
        background: #4caf50;
      }

      /* Scrollable content */
      .ide-task-content {
        flex: 1;
        overflow-y: auto;
        padding: 18px 18px 14px;
        scrollbar-color: #6c7cff transparent;
      }

      .ide-task-content::-webkit-scrollbar {
        width: 6px;
      }

      .ide-task-content::-webkit-scrollbar-track {
        background: transparent;
      }

      .ide-task-content::-webkit-scrollbar-thumb {
        background: #6c7cff;
        border-radius: 3px;
      }

      .ide-task-badge {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 3px 10px;
        border-radius: 12px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        background: rgba(34, 197, 94, 0.14);
        color: #22c55e;
        border: 1px solid rgba(34, 197, 94, 0.38);
        margin-bottom: 14px;
      }

      .ide-task-badge--inside {
        margin-bottom: 0;
        margin-left: auto;
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 10px;
        letter-spacing: 0.08em;
      }

      .ide-task-badge i {
        font-size: 8px;
        color: #22c55e;
        opacity: 0.95;
        filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.45));
      }

      .ide-task-meta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }

      .ide-task-title {
        font-size: 22px;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 16px;
        line-height: 1.35;
      }

      .ide-task-number {
        font-size: 13px;
        color: var(--text-muted);
        margin-bottom: 0;
      }

      .ide-task-desc {
        font-size: 14px;
        line-height: 1.75;
        color: var(--text-secondary);
        margin-bottom: 24px;
      }

      .ide-task-desc p {
        margin-bottom: 10px;
      }

      .ide-task-desc p:last-child {
        margin-bottom: 0;
      }

      /* Task list box */
      .ide-task-box {
        background: rgba(255, 255, 255, 0.025);
        border: 1px solid var(--border-color);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 16px;
      }

      [data-theme="light"] .ide-task-box {
        background: rgba(0, 0, 0, 0.02);
      }

      .ide-task-box-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .ide-task-box-title i {
        color: #22c55e;
        font-size: 11px;
      }

      .ide-task-list {
        list-style: none;
        counter-reset: task-counter;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .ide-task-list li {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        column-gap: 10px;
        align-items: start;
        font-size: 15px;
        line-height: 1.65;
        color: var(--text-secondary);
        counter-increment: task-counter;
      }

      .ide-task-list-item-text {
        flex: 1;
        min-width: 0;
      }

      .ide-task-list-item-text--with-snippet {
        display: inline-flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px 10px;
        line-height: 1.45;
      }

      .ide-task-list-item-text--with-snippet .ide-task-code-badge--result {
        vertical-align: middle;
      }

      .ide-task-list-lead {
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-secondary);
        margin: 0 0 12px;
      }

      .ide-task-list-lead strong {
        color: var(--text-primary);
      }

      .ide-task-box--compact {
        padding: 12px 14px;
        margin-bottom: 12px;
      }

      .ide-task-box--compact .ide-task-box-title {
        margin-bottom: 8px;
        font-size: 15px;
      }

      .ide-task-box--compact .ide-task-list-lead {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
      }

      .ide-task-box--compact .ide-task-list {
        gap: 8px;
        margin-top: 10px;
      }

      .ide-task-box--compact .ide-task-list li {
        font-size: 15px;
        line-height: 1.55;
      }

      .ide-task-code-badge {
        display: inline-block;
        padding: 2px 8px;
        margin: 0 2px;
        vertical-align: baseline;
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.02em;
        color: var(--text-primary);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 6px;
      }

      [data-theme="light"] .ide-task-code-badge {
        background: #ececec;
        border-color: #dcdcdc;
      }

      /**
       * Подсветка названий вкладок («Результат», «Предпросмотр» и т.п.)
       * в тексте заданий Frontend и 1С - тот же нейтральный серый, что у code-badge.
       */
      .ide-task-tab-ref {
        display: inline-block;
        padding: 1px 6px;
        margin: 0 1px;
        vertical-align: baseline;
        border-radius: 5px;
        font-size: 0.94em;
        font-weight: 500;
        line-height: 1.45;
        color: var(--text-primary);
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }

      [data-theme="light"] .ide-task-tab-ref {
        background: #ececec;
        border-color: #dcdcdc;
      }

      /* Строка для редактора - блок с акцентным левым бордером */
      .ide-task-box .ide-task-write-this {
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 8px 0 0;
        padding: 6px 12px;
        border-radius: 0 6px 6px 0;
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 13px;
        font-weight: 500;
        color: #a5c9f5;
        background: rgba(108, 124, 255, 0.07);
        border: 1px solid rgba(108, 124, 255, 0.18);
        border-left: 3px solid #6c7cff;
      }

      [data-theme="light"] .ide-task-box .ide-task-write-this {
        color: #3a5db0;
        background: rgba(108, 124, 255, 0.05);
        border: 1px solid rgba(108, 124, 255, 0.18);
        border-left: 3px solid #6c7cff;
      }

      /* Одна строка для редактора: нейтральный серый фон, слегка сильнее левый и правый край */
      .ide-task-h1-snippet-wrap {
        display: block;
        margin-top: 10px;
        width: 100%;
      }

      .ide-task-h1-snippet--inline {
        display: inline-block;
        width: fit-content;
        max-width: 100%;
        margin: 0;
        padding: 7px 12px;
        border-radius: 6px;
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.02em;
        line-height: 1.45;
        color: var(--text-primary);
        background: rgba(148, 163, 184, 0.14);
        border: 1px solid rgba(148, 163, 184, 0.2);
        border-left: 2px solid rgba(148, 163, 184, 0.42);
        border-right: 2px solid rgba(148, 163, 184, 0.42);
        box-sizing: border-box;
      }

      [data-theme="light"] .ide-task-h1-snippet--inline {
        background: rgba(71, 85, 105, 0.1);
        border-color: rgba(71, 85, 105, 0.18);
        border-left-color: rgba(71, 85, 105, 0.32);
        border-right-color: rgba(71, 85, 105, 0.32);
      }

      .ide-task-list li::before {
        content: counter(task-counter);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 50%;
        background: rgba(79, 195, 247, 0.12);
        color: #4fc3f7;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        margin-top: 0.2em;
        justify-self: center;
      }

      /* Expandable explanation */
      .ide-explanation-block {
        border: 1px solid var(--border-color);
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 24px;
      }

      .ide-explanation-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 18px;
        background: none;
        border: none;
        cursor: pointer;
        text-align: left;
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 600;
        transition: background 0.2s;
      }

      .ide-explanation-toggle:hover {
        background: rgba(255, 255, 255, 0.03);
      }

      .ide-explanation-toggle-left {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .ide-explanation-toggle-left i {
        color: #ffc501;
        font-size: 15px;
      }

      .ide-explanation-toggle-arrow {
        color: var(--text-muted);
        font-size: 13px;
        transition: transform 0.2s;
      }

      .ide-explanation-toggle--open .ide-explanation-toggle-arrow {
        transform: rotate(180deg);
      }

      .ide-explanation-body {
        display: none;
        padding: 0 18px 18px;
        font-size: 15px;
        line-height: 1.7;
        color: var(--text-secondary);
        border-top: 1px solid var(--border-color);
      }

      .ide-explanation-body--open {
        display: block;
      }

      .ide-explanation-body p {
        margin-top: 12px;
        margin-bottom: 8px;
      }

      /* Внешние ссылки (Telegram, MDN): серый «чип», чтобы было видно кликабельность */
      .ide-explanation-body a[href^="http"] {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        padding: 5px 11px;
        margin: 0 2px;
        border-radius: 8px;
        background: rgba(148, 163, 184, 0.2);
        border: 1px solid rgba(148, 163, 184, 0.35);
        color: var(--text-primary);
        font-weight: 600;
        text-decoration: none;
        transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
      }

      .ide-explanation-body a[href^="http"]:hover {
        background: rgba(148, 163, 184, 0.32);
        border-color: rgba(148, 163, 184, 0.5);
        color: var(--text-primary);
      }

      .ide-explanation-body a[href^="http"]:focus-visible {
        outline: 2px solid rgba(79, 195, 247, 0.65);
        outline-offset: 2px;
      }

      .ide-explanation-body a[href^="http"] code {
        background: rgba(15, 23, 42, 0.35);
        padding: 2px 6px;
        border-radius: 4px;
        font-weight: 700;
      }

      [data-theme="light"] .ide-explanation-body a[href^="http"] {
        background: rgba(100, 116, 139, 0.14);
        border-color: rgba(100, 116, 139, 0.28);
      }

      [data-theme="light"] .ide-explanation-body a[href^="http"]:hover {
        background: rgba(100, 116, 139, 0.22);
        border-color: rgba(100, 116, 139, 0.4);
      }

      [data-theme="light"] .ide-explanation-body a[href^="http"] code {
        background: rgba(241, 245, 249, 0.95);
        color: #0f172a;
      }

      /* Ссылки на уроки курса: компактный серый «чип» */
      .ide-explanation-body a[href*="lessons/frontend-lesson"] {
        display: inline;
        padding: 2px 8px;
        margin: 0 2px;
        border-radius: 6px;
        background: rgba(148, 163, 184, 0.2);
        border: 1px solid rgba(148, 163, 184, 0.32);
        color: var(--text-primary);
        font-size: inherit;
        font-weight: 600;
        line-height: 1.35;
        text-decoration: none;
        vertical-align: baseline;
        transition: background 0.15s ease, border-color 0.15s ease;
      }

      .ide-explanation-body a[href*="lessons/frontend-lesson"]:hover {
        background: rgba(148, 163, 184, 0.28);
        border-color: rgba(148, 163, 184, 0.45);
        color: var(--text-primary);
      }

      .ide-explanation-body a[href*="lessons/frontend-lesson"]:focus-visible {
        outline: 2px solid rgba(79, 195, 247, 0.65);
        outline-offset: 2px;
      }

      [data-theme="light"] .ide-explanation-body a[href*="lessons/frontend-lesson"] {
        background: rgba(100, 116, 139, 0.14);
        border-color: rgba(100, 116, 139, 0.28);
      }

      [data-theme="light"] .ide-explanation-body a[href*="lessons/frontend-lesson"]:hover {
        background: rgba(100, 116, 139, 0.22);
        border-color: rgba(100, 116, 139, 0.4);
      }

      /* Как .semantic-tag-name в courses/frontend/lessons/frontend-lesson-1.html */
      .ide-explanation-h1-lines {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
        margin-bottom: 10px;
      }

      .ide-explanation-h1-line {
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
        color: var(--text-secondary);
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 8px;
      }

      .ide-explanation-body .ide-explanation-semantic-tag,
      .ide-explanation-body p code,
      .ide-explanation-body li code,
      .ide-explanation-body p .ide-task-code-badge,
      .ide-explanation-body li .ide-task-code-badge {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        margin: 0;
        border-radius: 9px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        color: var(--text-primary);
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 14px;
        font-weight: 700;
        line-height: 1.25;
        vertical-align: middle;
      }

      .ide-explanation-body .ide-code-block code {
        display: block;
        padding: 0;
        margin: 0;
        border-radius: 0;
        background: transparent;
        border: none;
        color: inherit;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
      }

      [data-theme="light"] .ide-explanation-body .ide-explanation-semantic-tag,
      [data-theme="light"] .ide-explanation-body p code,
      [data-theme="light"] .ide-explanation-body li code,
      [data-theme="light"] .ide-explanation-body p .ide-task-code-badge,
      [data-theme="light"] .ide-explanation-body li .ide-task-code-badge {
        background: #ececec;
        border-color: #dcdcdc;
        color: #334155;
      }

      .ide-explanation-h1-line-desc {
        color: var(--text-secondary);
      }

      .ide-explanation-body ul {
        padding-left: 0;
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .ide-explanation-body ul li {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        font-size: 15px;
        line-height: 1.55;
      }

      .ide-explanation-body ul li::before {
        content: "•";
        color: #4fc3f7;
        font-weight: 700;
        flex-shrink: 0;
        margin-top: 0;
        line-height: 1;
      }

      /* Справочные списки в «Доп. информации» - не нумерованные задачи */
      .ide-explanation-body .ide-task-list {
        counter-reset: none;
        gap: 10px;
      }

      .ide-explanation-body .ide-task-list li {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        grid-template-columns: unset;
        counter-increment: none;
        line-height: 1.55;
      }

      .ide-explanation-body .ide-task-list li::before {
        content: "•";
        display: block;
        width: auto;
        height: auto;
        min-width: 0;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #4fc3f7;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        justify-self: auto;
      }

      /* Компактные списки в шагах практики */
      .practice-step-panel .ide-task-list,
      .ide-task-list--compact {
        counter-reset: none;
        gap: 8px;
        margin-top: 8px;
      }

      .practice-step-panel .ide-task-list li,
      .ide-task-list--compact li {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 8px;
        grid-template-columns: unset;
        counter-increment: none;
        font-size: 13px;
        line-height: 1.5;
      }

      .practice-step-panel .ide-task-list li::before,
      .ide-task-list--compact li::before {
        content: "•";
        display: block;
        width: auto;
        height: auto;
        min-width: 0;
        margin-top: 0;
        border-radius: 0;
        background: transparent;
        color: #4fc3f7;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        justify-self: auto;
      }

      .practice-step-panel .ide-task-list .ide-task-code-badge,
      .ide-task-list--compact .ide-task-code-badge {
        vertical-align: middle;
      }

      /* Блок кода в теории (как в референсе: шапка + подсветка) */
      .ide-code-block {
        position: relative;
        margin-top: 16px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: #14161a;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
      }

      [data-theme="light"] .ide-code-block {
        border-color: rgba(0, 0, 0, 0.1);
        background: #1a1d22;
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
      }

      .ide-code-block-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-height: 40px;
        padding: 0 10px 0 14px;
        background: linear-gradient(180deg, #1e2229 0%, #191c22 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
      }

      .ide-code-block-lang {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: #7a8496;
        user-select: none;
      }

      .ide-code-block-pre {
        margin: 0;
        padding: 16px 18px 18px;
        overflow-x: auto;
        background: #0f1114 !important;
        font-family: "JetBrains Mono", "Fira Code", Consolas, monospace;
        font-size: 12.5px;
        line-height: 1.65;
        -webkit-overflow-scrolling: touch;
      }

      /* Не задавать color на code - иначе перебивает наследование токенов Prism при сбое CDN */
      .ide-code-block-pre code {
        font-family: inherit !important;
        font-size: inherit !important;
        background: transparent !important;
      }

      /* Запасная палитра, если тема Prism не подгрузилась */
      .ide-code-block-pre .token.tag,
      .ide-code-block-pre .token.tag .token.punctuation {
        color: #f92672;
      }

      .ide-code-block-pre .token.attr-name {
        color: #a6e22e;
      }

      .ide-code-block-pre .token.attr-value,
      .ide-code-block-pre .token.string {
        color: #e6db74;
      }

      .ide-code-block-pre .token.punctuation {
        color: #f8f8f2;
      }

      .ide-code-block-pre .token.prolog,
      .ide-code-block-pre .token.doctype,
      .ide-code-block-pre .token.comment {
        color: #75715e;
        font-style: italic;
      }

      .ide-code-block-pre .token.namespace,
      .ide-code-block-pre .token.entity {
        color: #ae81ff;
      }

      .ide-code-block .ide-code-copy-btn {
        position: static;
        flex-shrink: 0;
        width: 34px;
        height: 30px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: #b0b8c8;
      }

      .ide-code-block .ide-code-copy-btn:hover {
        background: rgba(79, 195, 247, 0.15);
        border-color: rgba(79, 195, 247, 0.35);
        color: #4fc3f7;
      }

      /* Старый absolute-copy для блоков без toolbar */
      .ide-code-block--legacy .ide-code-copy-btn {
        position: absolute;
        top: 8px;
        right: 8px;
      }

      /* Code syntax colors */
      .code-keyword {
        color: #4fc3f7;
        font-weight: bold;
      }

      .code-string {
        color: #81c784;
      }

      .code-number {
        color: #4dd0e1;
      }

      .code-comment {
        color: #9ccc65;
        font-style: italic;
      }

      /* Links row */
      .ide-task-links {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        margin-bottom: 8px;
      }

      .ide-task-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: var(--text-muted);
        text-decoration: none;
        padding: 3px 8px;
        border-radius: 4px;
        border: 1px solid var(--border-color);
        transition: color 0.2s, border-color 0.2s;
      }

      .ide-task-link:hover {
        color: var(--text-secondary);
        border-color: var(--text-muted);
      }

      /* ============================================================
         BOTTOM ACTIONS BAR (right pane)
      ============================================================ */
      .ide-task-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        background: var(--bg-secondary);
        border-top: 1px solid var(--border-color);
        flex-shrink: 0;
        gap: 8px;
      }

      .ide-task-actions-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
        margin-right: 14px;
      }

      .ide-task-actions-right {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Buttons */
      .ide-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
        border: 1px solid transparent;
        font-family: inherit;
        letter-spacing: 0.3px;
        white-space: nowrap;
      }

      .ide-btn--check {
        background: #2ecc71;
        color: #fff;
        border-color: #2ecc71;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        font-size: 12px;
        padding: 8px 18px;
      }

      .ide-btn--check:hover {
        background: #27ae60;
        border-color: #27ae60;
      }

      .ide-btn--helper {
        background: transparent;
        color: var(--text-secondary);
        border-color: var(--border-color);
      }

      .ide-btn--helper:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
        border-color: var(--text-muted);
      }

      /* Помощник: выпадающее меню по шагам (практика p-02 и др.) */
      .ide-hint-dropdown {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: stretch;
      }

      .ide-hint-dropdown__trigger .ide-hint-dropdown__trigger-chevron {
        margin-left: 4px;
        font-size: 11px;
        opacity: 0.75;
        transition: transform 0.2s ease;
      }

      .ide-hint-dropdown--open .ide-hint-dropdown__trigger .ide-hint-dropdown__trigger-chevron {
        transform: rotate(180deg);
      }

      .ide-hint-dropdown__panel {
        position: fixed;
        z-index: 500;
        min-width: min(292px, calc(100vw - 24px));
        max-width: calc(100vw - 24px);
        padding: 10px 0 8px;
        margin: 0;
        list-style: none;
        background: var(--bg-secondary);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        box-shadow:
          0 4px 24px rgba(0, 0, 0, 0.35),
          0 0 0 1px rgba(255, 255, 255, 0.04) inset;
      }

      [data-theme="light"] .ide-hint-dropdown__panel {
        box-shadow:
          0 8px 28px rgba(15, 23, 42, 0.12),
          0 0 0 1px rgba(15, 23, 42, 0.06) inset;
      }

      .ide-hint-dropdown__panel[hidden] {
        display: none !important;
      }

      .ide-hint-dropdown__lead {
        margin: 0 14px 8px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-muted);
        line-height: 1.35;
      }

      .ide-hint-dropdown__item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: calc(100% - 8px);
        margin: 0 4px;
        padding: 10px 12px;
        border: none;
        border-radius: 8px;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.45;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s ease, color 0.15s ease;
      }

      .ide-hint-dropdown__item:hover,
      .ide-hint-dropdown__item:focus-visible {
        background: rgba(108, 124, 255, 0.14);
        outline: none;
      }

      [data-theme="light"] .ide-hint-dropdown__item:hover,
      [data-theme="light"] .ide-hint-dropdown__item:focus-visible {
        background: rgba(84, 104, 242, 0.1);
      }

      .ide-hint-dropdown__item-num {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 800;
        background: rgba(108, 124, 255, 0.22);
        color: var(--text-primary);
      }

      .ide-hint-dropdown__item-text {
        flex: 1;
        min-width: 0;
      }

      .ide-hint-dropdown__item-text code {
        font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
        font-size: 12px;
        font-weight: 600;
        padding: 1px 5px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-secondary);
      }

      [data-theme="light"] .ide-hint-dropdown__item-text code {
        background: rgba(15, 23, 42, 0.06);
        color: var(--text-primary);
      }

      .ide-hint-dropdown__backdrop {
        position: fixed;
        inset: 0;
        z-index: 499;
        background: transparent;
        cursor: default;
      }

      .ide-hint-dropdown__backdrop[hidden] {
        display: none !important;
      }

      .ide-btn--next {
        background: transparent;
        color: var(--text-secondary);
        border-color: var(--border-color);
      }

      .ide-btn--next:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
        border-color: var(--text-muted);
      }

      .ide-btn--back {
        background: transparent;
        color: var(--text-muted);
        border-color: transparent;
        padding: 8px 10px;
      }

      .ide-btn--back:hover {
        color: var(--text-secondary);
        border-color: var(--border-color);
      }

      /* ============================================================
         LESSON LIST SIDEBAR (slide-out)
      ============================================================ */
      .ide-lessons-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 200;
        display: none;
      }

      .ide-lessons-overlay--open {
        display: block;
      }

      .ide-lessons-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 280px;
        height: 100%;
        background: var(--bg-secondary);
        border-right: 1px solid var(--border-color);
        z-index: 201;
        display: flex;
        flex-direction: column;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
      }

      .ide-lessons-panel--open {
        transform: translateX(0);
      }

      .ide-lessons-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
      }

      .ide-lessons-panel-title {
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary);
      }

      .ide-lessons-panel-close {
        width: 28px;
        height: 28px;
        background: none;
        border: none;
        color: var(--text-muted);
        cursor: pointer;
        border-radius: 4px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: color 0.2s;
      }

      .ide-lessons-panel-close:hover {
        color: var(--text-primary);
      }

      .ide-lessons-panel-body {
        flex: 1;
        overflow-y: auto;
        padding: 8px;
      }

      .ide-lesson-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 6px;
        text-decoration: none;
        color: var(--text-secondary);
        font-size: 13px;
        transition: background 0.2s, color 0.2s;
        margin-bottom: 2px;
      }

      .ide-lesson-item:hover {
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-primary);
      }

      .ide-lesson-item--active {
        background: rgba(79, 195, 247, 0.1);
        color: #4fc3f7;
      }

      .ide-lesson-item-num {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 50%;
        background: var(--bg-card);
        font-size: 11px;
        font-weight: 600;
        color: var(--text-muted);
        flex-shrink: 0;
      }

      .ide-lesson-item--active .ide-lesson-item-num {
        background: rgba(79, 195, 247, 0.15);
        color: #4fc3f7;
      }

      .ide-lessons-panel-back {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        text-decoration: none;
        color: var(--text-muted);
        font-size: 13px;
        border-top: 1px solid var(--border-color);
        transition: color 0.2s;
        flex-shrink: 0;
      }

      .ide-lessons-panel-back:hover {
        color: var(--text-primary);
      }

      /* ============================================================
         EDITOR HIGHLIGHT EFFECTS
      ============================================================ */
      .ide-left.editor-success .ide-editor-body {
        outline: 2px solid rgba(76, 175, 80, 0.4);
        outline-offset: -2px;
      }

      .ide-left.editor-success--sticky .ide-editor-body {
        outline: 2px solid rgba(76, 175, 80, 0.55);
        box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.12);
      }

      .ide-left.editor-error .ide-editor-body {
        outline: 2px solid rgba(239, 83, 80, 0.4);
        outline-offset: -2px;
      }

      /* Успешная проверка: confetti */
      .practice-success-celebration {
        position: fixed;
        inset: 0;
        z-index: 100010;
        pointer-events: none;
      }

      .practice-success-celebration__canvas {
        position: fixed;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      /* ============================================================
         MOBILE RESPONSIVE
      ============================================================ */
      @media (max-width: 768px) {
        .ide-workspace {
          flex-direction: column;
        }

        .ide-left {
          flex: 0 0 50%;
          max-width: 100%;
          border-right: none;
          border-bottom: 1px solid var(--border-color);
        }

        .ide-resizer {
          display: none;
        }

        .ide-right {
          flex: 0 0 50%;
          min-width: 0;
        }

        .ide-breadcrumb {
          display: none;
        }

        .ide-header-sep {
          display: none;
        }

        .ide-burger-btn {
          display: flex;
        }

        .ide-header-btn--donate,
        .ide-header-btn--nav {
          display: none;
        }

        .ide-task-content {
          padding: 16px;
        }

        .ide-task-title {
          font-size: 18px;
        }

        .ide-task-actions {
          padding: 8px 12px;
        }

        .ide-btn {
          padding: 7px 12px;
          font-size: 12px;
        }

        .ide-btn--check {
          padding: 7px 14px;
        }
      }

      @media (max-width: 480px) {
        .ide-editor-kbd-hint {
          display: none;
        }

        .ide-task-progress-dots {
          display: none;
        }
      }

      /* ============================================================
         Шапка как на frontend-lesson-1 (practice-fe-header)
      ============================================================ */
      body.practice-fe-header {
        --fe-dash-header-sticky-offset: 52px;
        --accent-orange: #6c7cff;
        --accent-orange-hover: #5468f2;
        scrollbar-color: #6c7cff transparent;
      }

      body.practice-fe-header ::-webkit-scrollbar-thumb {
        background: #6c7cff !important;
      }

      body.practice-fe-header ::-webkit-scrollbar-thumb:hover {
        background: #5468f2 !important;
      }

      body.practice-fe-header .ide-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 16px;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        flex-shrink: 0;
        position: sticky;
        top: 0;
        z-index: 50;
        gap: 12px;
      }

      body.practice-fe-header .ide-header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }

      body.practice-fe-header .ide-logo {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
        flex-shrink: 0;
        line-height: 0;
      }

      body.practice-fe-header .ide-logo-img {
        width: 28px;
        height: 28px;
        border-radius: 4px;
        object-fit: cover;
        display: block;
        flex-shrink: 0;
      }

      body.practice-fe-header .ide-logo-text {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 0.5px;
        line-height: 28px;
        height: 28px;
        display: inline-flex;
        align-items: center;
        transform: translateY(1px);
      }

      body.practice-fe-header .ide-header-sep {
        display: block;
        width: 1px;
        height: 22px;
        margin: 0 4px 0 10px;
        background: rgba(255, 255, 255, 0.18);
        flex-shrink: 0;
      }

      [data-theme="light"] body.practice-fe-header .ide-header-sep {
        background: rgba(15, 23, 42, 0.14);
      }

      body.practice-fe-header .ide-breadcrumb {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        color: var(--text-secondary);
        font-size: 13px;
        white-space: nowrap;
      }

      body.practice-fe-header .ide-breadcrumb a {
        color: var(--text-secondary);
        text-decoration: none;
        transition: color 0.2s ease;
      }

      body.practice-fe-header .ide-breadcrumb a:hover {
        color: var(--text-primary);
      }

      body.practice-fe-header .ide-breadcrumb-sep {
        color: var(--text-muted, rgba(255, 255, 255, 0.35));
        flex-shrink: 0;
      }

      body.practice-fe-header .ide-breadcrumb-current {
        color: var(--text-primary);
        font-weight: 600;
      }

      @media (max-width: 768px) {
        body.practice-fe-header .ide-breadcrumb,
        body.practice-fe-header .ide-header-sep {
          display: none;
        }
      }

      body.practice-fe-header .ide-header-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 1;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
      }

      body.practice-fe-header .ide-header-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: none;
        border: none;
        color: var(--text-secondary);
        font-size: 13px;
        padding: 6px 10px;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
        transition: color 0.2s, background 0.2s;
        white-space: nowrap;
        flex-shrink: 0;
      }

      body.practice-fe-header .ide-header-btn[href*="questions/questions.html"],
      body.practice-fe-header .ide-header-btn[hidden] {
        display: none !important;
      }

      body.practice-fe-header .ide-header-btn:hover {
        color: var(--text-primary);
        background: rgba(255, 255, 255, 0.06);
      }

      body.practice-fe-header .ide-header-btn--donate {
        background: rgba(255, 197, 1, 0.1);
        color: #ffc501;
        border: 1px solid rgba(255, 197, 1, 0.25);
      }

      body.practice-fe-header .ide-header-btn--donate:hover {
        background: rgba(255, 197, 1, 0.18);
        color: #ffc501;
      }

      body.practice-fe-header .ide-header-btn .header-nav-badge {
        display: inline-flex;
        align-items: center;
        position: relative;
        top: 0;
        margin-left: -0.15em;
        padding: 1px 5px;
        background: #6c7cff;
        color: #ffffff;
        font-size: 9px;
        font-weight: 800;
        border-radius: 3px;
        line-height: 1.3;
        letter-spacing: 0.04em;
        flex-shrink: 0;
        vertical-align: baseline;
        transform: rotate(-8deg);
        transform-origin: left center;
      }

      [data-theme="light"] body.practice-fe-header .ide-header-btn .header-nav-badge {
        background: #6c7cff;
        color: #ffffff;
      }

      body.practice-fe-header .ide-header-btn--donate-wrap {
        white-space: normal;
        line-height: 1.2;
        max-width: 172px;
        text-align: center;
        justify-content: center;
      }

      body.practice-fe-header .ide-theme-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 14px;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
      }

      body.practice-fe-header .ide-theme-btn:hover {
        color: var(--text-primary);
        border-color: var(--text-secondary);
        background: rgba(255, 255, 255, 0.04);
      }

      body.practice-fe-header .ide-header .header-language-switch__summary {
        height: 32px;
        padding: 0 8px;
        border-radius: 5px;
        border: 1px solid var(--border-color);
      }

      body.practice-fe-header .ide-burger-btn {
        display: none;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        background: none;
        border: 1px solid var(--border-color);
        border-radius: 5px;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 16px;
        transition: color 0.2s;
      }

      /* Вкладка index.html + крошки справа в шапке превью */
      .ide-preview-pane-header {
        flex-shrink: 0;
      }

      .ide-preview-pane-header .ide-editor-tabs {
        flex: 0 1 auto;
        min-width: 0;
      }

      .ide-preview-breadcrumb {
        display: flex;
        align-items: center;
        gap: 4px;
        margin-left: auto;
        padding: 0 10px 0 8px;
        font-size: 11px;
        font-weight: 500;
        color: var(--text-muted);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: min(220px, 42%);
      }

      .ide-preview-breadcrumb a {
        color: var(--text-muted);
        text-decoration: none;
        transition: color 0.2s;
      }

      .ide-preview-breadcrumb a:hover {
        color: var(--text-primary);
      }

      .ide-preview-breadcrumb-sep {
        flex-shrink: 0;
        opacity: 0.7;
      }

      .ide-preview-frame-wrap {
        flex: 1;
        min-height: 120px;
        min-width: 0;
        overflow: hidden;
        background: var(--bg-primary);
        display: flex;
        flex-direction: column;
      }

      /* Внутренний блок: белый iframe предпросмотра + абсолютный слой тостов над низом */
      .ide-preview-pane {
        flex: 1;
        min-height: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
      }

      .ide-preview-pane #result-iframe {
        display: block;
        flex: 1;
        min-height: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        border: none;
        background: #fff;
      }

      .ide-right--preview-only {
        flex: 1;
        min-height: 0;
      }

      /* «Назад к уроку» - как кнопка «Канал в Telegram» в уроке 0 */
      .ide-btn--back-lesson {
        background: linear-gradient(135deg, #3f5fcf 0%, #3249a6 100%) !important;
        color: #fff !important;
        border: none !important;
        padding: 8px 14px !important;
        border-radius: 8px !important;
        font-weight: 500 !important;
        transition: transform 0.15s ease, box-shadow 0.2s ease !important;
        box-shadow: none !important;
      }

      .ide-btn--back-lesson:hover {
        transform: translateY(-1px);
        box-shadow: 0 3px 10px rgba(59, 89, 194, 0.25);
        background: linear-gradient(135deg, #4968db 0%, #3b56bd 100%) !important;
        color: #fff !important;
        border-color: transparent !important;
      }

      .ide-btn--back-lesson i {
        color: inherit;
      }

      /* К программе курса - вторичная иконка, в тон «Помощник» / «Дальше» */
      .ide-btn--course-program {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        width: 36px;
        height: 36px;
        padding: 0 !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: var(--text-muted) !important;
        border: 1px solid var(--border-color) !important;
        flex-shrink: 0;
        box-shadow: none !important;
        transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
      }

      .ide-btn--course-program:hover {
        transform: translateY(-1px);
        background: rgba(255, 255, 255, 0.05) !important;
        border-color: var(--text-muted) !important;
        color: var(--text-secondary) !important;
      }

      [data-theme="light"] .ide-btn--course-program:hover {
        background: rgba(0, 0, 0, 0.04) !important;
      }

      .ide-btn--course-program i {
        font-size: 15px;
        color: inherit;
        opacity: 0.9;
      }

      /* Практика: кнопка темы в шапке скрыта (в DOM остаётся - см. theme-toggle.js / handleIdeThemeToggle) */
      body.practice-fe-header .ide-header #theme-toggle {
        display: none !important;
      }

      /* ============================================================
         ПЕРВЫЙ ВИЗИТ - мини-обучение (spotlight + карточка)
      ============================================================ */
      .practice-onboarding {
        position: fixed;
        inset: 0;
        z-index: 12000;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.28s ease, visibility 0.28s;
      }

      .practice-onboarding[hidden] {
        display: none !important;
      }

      .practice-onboarding--visible {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
      }

      .practice-onboarding__blocker {
        position: absolute;
        inset: 0;
        background: rgba(10, 12, 18, 0.78);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        pointer-events: auto;
      }

      [data-theme="light"] .practice-onboarding__blocker {
        background: rgba(20, 22, 28, 0.58);
      }

      .practice-onboarding__cutout {
        position: fixed;
        pointer-events: none;
        border-radius: 10px;
        border: 2px solid rgba(79, 195, 247, 0.92);
        box-shadow:
          0 0 0 1px rgba(0, 0, 0, 0.35),
          0 0 28px rgba(79, 195, 247, 0.22);
        z-index: 1;
        background: transparent;
        transition:
          top 0.22s ease,
          left 0.22s ease,
          width 0.22s ease,
          height 0.22s ease,
          opacity 0.2s ease;
      }

      [data-theme="light"] .practice-onboarding__cutout {
        border-color: rgba(2, 119, 189, 0.88);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.5),
          0 0 20px rgba(2, 119, 189, 0.15);
      }

      .practice-onboarding__panel {
        position: fixed;
        left: 50%;
        bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 52px));
        transform: translateX(-50%);
        width: min(420px, calc(100vw - 28px));
        max-width: 100%;
        pointer-events: auto;
        padding: 18px 20px 16px;
        border-radius: 14px;
        background: linear-gradient(155deg, #141820 0%, #1a1f2a 48%, #12151c 100%);
        border: 1px solid rgba(79, 195, 247, 0.22);
        box-shadow:
          0 18px 50px rgba(0, 0, 0, 0.55),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        z-index: 2;
        font-family: "Roboto", sans-serif;
      }

      [data-theme="light"] .practice-onboarding__panel {
        background: linear-gradient(180deg, #ffffff 0%, #f4f6fa 100%);
        border-color: rgba(2, 119, 189, 0.28);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
      }

      .practice-onboarding__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 10px;
      }

      .practice-onboarding__title {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
        color: var(--text-primary);
        letter-spacing: 0.02em;
        line-height: 1.25;
      }

      .practice-onboarding__close {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        margin: -6px -8px 0 0;
        padding: 0;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--text-secondary);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        transition: color 0.2s, border-color 0.2s, background 0.2s;
      }

      .practice-onboarding__close--next {
        font-size: 15px;
      }

      .practice-onboarding__close--next i {
        display: block;
        line-height: 1;
      }

      .practice-onboarding__close:hover {
        color: var(--text-primary);
        border-color: rgba(79, 195, 247, 0.45);
        background: rgba(79, 195, 247, 0.1);
      }

      .practice-onboarding__close:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.55);
      }

      [data-theme="light"] .practice-onboarding__close {
        background: rgba(0, 0, 0, 0.04);
      }

      .practice-onboarding__progress {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--text-muted);
      }

      .practice-onboarding__dots {
        display: flex;
        gap: 5px;
        flex-wrap: wrap;
      }

      .practice-onboarding__dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--border-color);
        transition: background 0.2s, transform 0.2s;
      }

      .practice-onboarding__dot--active {
        background: #4fc3f7;
        transform: scale(1.15);
      }

      .practice-onboarding__dot--done {
        background: rgba(79, 195, 247, 0.45);
      }

      .practice-onboarding__text {
        margin: 0;
        font-size: 14px;
        line-height: 1.55;
        color: var(--text-secondary);
      }

      .practice-onboarding__hint {
        margin: 12px 0 0;
        font-size: 12px;
        line-height: 1.45;
        color: #d7e8ff;
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid rgba(79, 195, 247, 0.38);
        background: linear-gradient(135deg, rgba(79, 195, 247, 0.18) 0%, rgba(47, 128, 237, 0.12) 100%);
        box-shadow: 0 0 0 1px rgba(79, 195, 247, 0.18);
      }

      .practice-onboarding__hint-line {
        display: block;
        margin-top: 6px;
      }

      .practice-onboarding__hint .ide-kbd {
        background: rgba(8, 14, 28, 0.7);
        border-color: rgba(79, 195, 247, 0.55);
        color: #eef7ff;
        font-weight: 800;
        font-size: 12px;
        line-height: 1.1;
        padding: 3px 8px;
        border-radius: 6px;
        box-shadow:
          0 0 0 1px rgba(79, 195, 247, 0.32),
          0 3px 8px rgba(2, 136, 209, 0.28);
      }

      [data-theme="light"] .practice-onboarding__hint {
        color: #0f3f68;
        border-color: rgba(2, 119, 189, 0.28);
        background: linear-gradient(135deg, rgba(3, 169, 244, 0.12) 0%, rgba(33, 150, 243, 0.08) 100%);
        box-shadow: 0 0 0 1px rgba(2, 119, 189, 0.12);
      }

      [data-theme="light"] .practice-onboarding__hint .ide-kbd {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(2, 119, 189, 0.35);
        color: #01579b;
        box-shadow:
          0 0 0 1px rgba(2, 119, 189, 0.2),
          0 2px 6px rgba(2, 119, 189, 0.18);
      }

      @media (max-width: 600px) {
        .practice-onboarding__panel {
          bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 44px));
          width: calc(100vw - 20px);
          padding: 14px 16px 12px;
        }

        .practice-onboarding__title {
          font-size: 15px;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .practice-onboarding,
        .practice-onboarding__cutout {
          transition: none !important;
        }
      }

      /* ============================================================
         Пошаговые задачи (аккордеон, практики HTML)
      ============================================================ */
      .practice-step-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 14px;
      }

      .practice-step-card {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-secondary);
        overflow: hidden;
      }

      .practice-step-card--locked {
        opacity: 0.55;
      }

      .practice-step-card--done {
        border-color: rgba(80, 200, 120, 0.35);
      }

      .practice-step-toggle {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        padding: 12px 14px;
        margin: 0;
        border: none;
        background: transparent;
        color: var(--text-primary);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s ease;
      }

      .practice-step-toggle:hover:not(:disabled) {
        background: rgba(255, 255, 255, 0.04);
      }

      [data-theme="light"] .practice-step-toggle:hover:not(:disabled) {
        background: rgba(0, 0, 0, 0.04);
      }

      .practice-step-toggle:disabled {
        cursor: not-allowed;
      }

      .practice-step-toggle:focus-visible {
        outline: 2px solid rgba(79, 195, 247, 0.65);
        outline-offset: 2px;
      }

      .practice-step-toggle__num {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 28px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 800;
        background: rgba(108, 124, 255, 0.2);
        color: var(--text-primary);
      }

      .practice-step-card--done .practice-step-toggle__num {
        background: rgba(80, 200, 120, 0.25);
      }

      .practice-step-toggle__label {
        flex: 1;
        min-width: 0;
        line-height: 1.45;
      }

      .practice-step-toggle__label .ide-task-code-badge {
        font-size: 12px;
      }

      .practice-step-toggle__badge {
        flex-shrink: 0;
        margin-left: auto;
      }

      .practice-step-panel {
        display: none;
        padding: 12px 14px 18px;
        font-size: 13px;
        line-height: 1.55;
        color: var(--text-secondary);
      }

      .practice-step-stack--p02 .practice-step-panel,
      .practice-step-stack--p03 .practice-step-panel,
      .practice-step-stack--p05 .practice-step-panel,
      .practice-step-stack--p08lesson .practice-step-panel,
      .practice-step-stack--p07 .practice-step-panel,
      .practice-step-stack--p11 .practice-step-panel {
        padding-top: 16px;
        padding-bottom: 22px;
      }

      .practice-step-card--open .practice-step-panel {
        display: block;
      }

      .practice-step-panel p {
        margin: 0 0 10px;
      }

      .practice-step-panel p:last-child {
        margin-bottom: 0;
      }

      .practice-step-panel .ide-task-code-badge {
        vertical-align: middle;
      }

      /* ============================================================
         Practice header: burger + drawer ≤1240px (как frontend-lessons)
      ============================================================ */
      @media (max-width: 1240px) {
        body.practice-fe-header .ide-header-right .header-burger-wrapper {
          display: flex !important;
          visibility: visible !important;
          opacity: 1 !important;
          flex-shrink: 0;
          margin-left: 4px;
        }

        body.practice-fe-header .ide-header-right .header-menu-btn,
        body.practice-fe-header .ide-header-right .ide-burger-btn {
          display: flex !important;
          visibility: visible !important;
          opacity: 1 !important;
          align-items: center;
          justify-content: center;
          min-width: 40px;
          min-height: 40px;
          padding: 8px;
          border: none;
          background: transparent;
          cursor: pointer;
        }

        [data-theme="dark"] body.practice-fe-header .ide-header-right .header-menu-btn .menu-icon {
          background: #ffffff !important;
        }

        [data-theme="light"] body.practice-fe-header .ide-header-right .header-menu-btn .menu-icon {
          background: #000000 !important;
        }

        body.practice-fe-header .ide-header-right .header-menu-btn:hover .menu-icon,
        body.practice-fe-header .ide-header-right .header-menu-btn.active:hover .menu-icon {
          background: var(--accent-orange) !important;
        }

        [data-theme="dark"] body.practice-fe-header .ide-header-right .header-menu-btn.active .menu-icon {
          background: #ffffff !important;
        }

        [data-theme="light"] body.practice-fe-header .ide-header-right .header-menu-btn.active .menu-icon {
          background: #000000 !important;
        }

        body.practice-fe-header .ide-header-btn--nav,
        body.practice-fe-header .ide-header-btn--donate,
        body.practice-fe-header .ide-header .header-language-switch {
          display: none !important;
        }
      }

      /* Компактная шапка practice на узких экранах */
      @media (max-width: 768px) {
        body.practice-fe-header .ide-header {
          height: auto;
          min-height: 48px;
          padding: 6px 10px;
          gap: 6px;
        }

        body.practice-fe-header .ide-logo-text {
          font-size: 11px;
          max-width: 42vw;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        body.practice-fe-header .ide-logo-img {
          width: 24px;
          height: 24px;
        }

        body.practice-fe-header .ide-task-actions {
          flex-wrap: wrap;
          padding: 8px 10px;
          gap: 8px;
        }

        body.practice-fe-header .ide-task-actions-right {
          flex-wrap: wrap;
          gap: 6px;
          justify-content: flex-end;
        }

        body.practice-fe-header .ide-preview-breadcrumb,
        body.practice-fe-header .ide-breadcrumb,
        body.practice-fe-header .ide-header-sep {
          display: none;
        }
      }

      @media (max-width: 480px) {
        body.practice-fe-header .ide-logo-text {
          display: none;
        }

        body.practice-fe-header .ide-btn--helper {
          display: none;
        }
      }

/* Skip link: visually hidden until keyboard focus (WCAG 2.4.1) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100002;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary, #1e1e1e);
  color: var(--text-primary, #fff);
  text-decoration: none;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
}
.skip-link:focus,
.skip-link:focus-visible {
  left: 1rem;
  outline: 2px solid var(--accent-orange, #6c7cff);
  outline-offset: 2px;
}