/* ───────── [STYLES: reset] ───────── */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow: hidden;
      height: 100%;
      background: #f5f5f7;
      color: #1d1d1f;
      user-select: none;
    }

    .screen {
      position: fixed;
      inset: 0;
      display: none;
    }

    .screen.active {
      display: block;
    }

    /* ───────── [STYLES: home] Кабинет ───────── */
    #home {
      overflow-y: auto;
      padding: 60px 40px;
    }

    #home .header {
      max-width: 1100px;
      margin: 0 auto 40px;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 20px;
      flex-wrap: wrap;
    }

    #home h1 {
      font-size: 42px;
      font-weight: 700;
      letter-spacing: -0.02em;
      margin-bottom: 8px;
    }

    #home .sub {
      color: #86868b;
      font-size: 15px;
    }

    .home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    #account-status { color: #86868b; font-size: 12px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; align-self: center; }
    #auth-modal { position: fixed; inset: 0; z-index: 6000; display: none; align-items: center; justify-content: center; padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); background: rgba(0,0,0,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
    #auth-modal.open { display: flex; }
    .auth-box { width: min(420px, 100%); padding: 28px; border-radius: 20px; background: #fff; color: #1d1d1f; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
    body.dark .auth-box { background: #2c2c2e; color: #f5f5f7; }
    .auth-box h2 { margin: 0 0 8px; font-size: 22px; }
    .auth-box p { margin: 0 0 20px; color: #86868b; font-size: 14px; line-height: 1.45; }
    .auth-box label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; }
    .auth-box input { width: 100%; padding: 12px 14px; border: 1px solid #d2d2d7; border-radius: 10px; background: #fff; color: #1d1d1f; font: inherit; user-select: text; }
    body.dark .auth-box input { background: #3a3a3c; border-color: #545458; color: #f5f5f7; }
    .auth-box input:focus { outline: 2px solid #0071e3; border-color: transparent; }
    .auth-message { min-height: 20px; margin-top: 12px !important; font-size: 13px !important; }
    .auth-message.error { color: #c62828 !important; }
    .auth-footer { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }
    .auth-footer button { padding: 10px 14px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; }
    #auth-submit { background: #0071e3; color: #fff; font-weight: 600; }
    #auth-close { background: #f1f1f4; color: #1d1d1f; }
    body.dark #auth-close { background: #48484a; color: #f5f5f7; }
    #auth-toggle { margin-top: 14px; padding: 0; border: 0; background: none; color: #0071e3; cursor: pointer; font: inherit; }

    .home-btn {
      padding: 10px 16px;
      border: none;
      background: #fff;
      color: #1d1d1f;
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .home-btn:hover {
      background: #f5f5f7;
    }

    .projects {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      gap: 20px;
    }

    .project-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
      transition: transform 0.15s, box-shadow 0.15s;
      position: relative;
      min-height: 160px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    .project-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    .project-card .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 8px;
      word-wrap: break-word;
    }

    .project-card .meta {
      font-size: 13px;
      color: #86868b;
    }

    .project-card .actions {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      gap: 4px;
      opacity: 0;
      transition: opacity 0.15s;
    }

    .project-card:hover .actions {
      opacity: 1;
    }

    .icon-btn {
      width: 28px;
      height: 28px;
      border: none;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1d1d1f;
    }

    .icon-btn:hover {
      background: rgba(0, 0, 0, 0.12);
    }

    .new-card {
      background: transparent;
      border: 2px dashed #c7c7cc;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      gap: 8px;
      cursor: pointer;
      color: #86868b;
      font-size: 15px;
      font-weight: 500;
      min-height: 160px;
      transition: all 0.15s;
    }

    .new-card:hover {
      border-color: #0071e3;
      color: #0071e3;
      background: rgba(0, 113, 227, 0.04);
    }

    .new-card .plus {
      font-size: 36px;
      font-weight: 300;
    }

    /* ───────── [STYLES: modals] Модалки ───────── */
    #tpl-modal,
    #dissolve-modal,
    #password-modal,
    #import-modal,
    #sync-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    #tpl-modal.open,
    #dissolve-modal.open,
    #password-modal.open,
    #import-modal.open,
    #sync-modal.open {
      display: flex;
    }

    .modal-box {
      background: #fff;
      border-radius: 20px;
      padding: 32px;
      max-width: 560px;
      width: 90vw;
      max-height: 85vh;
      overflow-y: auto;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    }

    body.dark .modal-box {
      background: #2c2c2e;
      color: #f5f5f7;
    }

    .modal-box h2 {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 8px;
    }

    .modal-box .sub {
      color: #86868b;
      margin-bottom: 24px;
      font-size: 14px;
    }

    .tpl-box {
      max-width: 780px;
    }

    .import-box { max-width: 520px; }
    .import-options { display: grid; gap: 10px; }
    .import-option { width: 100%; padding: 13px 16px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 600; text-align: left; }
    .import-option.create { background: #e8f5ec; color: #24633a; }
    .import-option.create:hover { background: #d5eddd; }
    .import-option.danger { background: #fff0ed; color: #a33a2a; }
    .import-option.danger:hover { background: #ffe0da; }
    body.dark .import-option.create { background: #254232; color: #d7f5df; }
    body.dark .import-option.danger { background: #4b2925; color: #ffd8d0; }
    .import-actions { margin-top: 14px; }
    .import-actions .create:disabled { opacity: .45; cursor: default; }

    /* Безопасный импорт: сводка, совпадения, полная замена */
    .import-summary { display: grid; gap: 6px; }
    .import-stat { display: flex; align-items: baseline; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgba(134, 134, 139, .08); font-size: 13px; line-height: 1.35; }
    .import-stat strong { min-width: 22px; font-size: 16px; text-align: right; }
    .import-stat.new { background: #e8f5ec; color: #24633a; }
    .import-stat.match { background: #eef4ff; color: #1f4f8f; }
    .import-stat.warn { background: #fff0ed; color: #a33a2a; }
    .import-matches { margin-top: 16px; }
    .import-matches[hidden] { display: none; }
    .import-matches-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 13px; font-weight: 600; }
    .import-match-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; max-height: 260px; overflow-y: auto; }
    .import-match-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid rgba(134, 134, 139, .22); border-radius: 10px; }
    .import-match-info { flex: 1; min-width: 0; }
    .import-match-name { overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
    .import-match-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 3px; color: #86868b; font-size: 11px; }
    .import-match-badge { padding: 0 6px; border-radius: 999px; background: rgba(134, 134, 139, .14); }
    .import-match-badge.newer { background: #e8f5ec; color: #24633a; }
    .import-match-badge.older { background: #fff4dc; color: #8a5a00; }
    .import-choice { flex: 0 0 auto; max-width: 190px; padding: 6px 8px; border: 1px solid rgba(134, 134, 139, .35); border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 12px; }
    .import-replace-all { display: block; margin: 14px auto 0; padding: 4px 8px; border: 0; background: transparent; color: #a33a2a; font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
    @media (max-width: 520px) {
      .import-match-row { flex-direction: column; align-items: stretch; }
      .import-choice { max-width: none; }
    }
    body.dark .import-stat.new, body.theme-midnight .import-stat.new { background: #254232; color: #d7f5df; }
    body.dark .import-stat.match, body.theme-midnight .import-stat.match { background: #22344d; color: #d5e5ff; }
    body.dark .import-stat.warn, body.theme-midnight .import-stat.warn { background: #4b2925; color: #ffd8d0; }
    body.dark .import-match-badge.newer, body.theme-midnight .import-match-badge.newer { background: #254232; color: #d7f5df; }
    body.dark .import-match-badge.older, body.theme-midnight .import-match-badge.older { background: #4a3a17; color: #ffe2a8; }
    body.dark .import-choice option, body.theme-midnight .import-choice option { background: #2c2c2e; color: #f5f5f7; }
    body.dark .import-replace-all, body.theme-midnight .import-replace-all { color: #ff9f8f; }

    .tpl-name-input {
      width: 100%;
      padding: 12px 16px;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      font-size: 15px;
      outline: none;
      background: #fafafa;
      color: inherit;
      margin-bottom: 20px;
    }

    .tpl-name-input:focus {
      border-color: #0071e3;
      background: #fff;
    }

    body.dark .tpl-name-input {
      background: #3a3a3c;
      border-color: #48484a;
    }

    .tpl-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
      gap: 12px;
    }

    .tpl-card {
      background: #f5f5f7;
      border-radius: 12px;
      padding: 16px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: all 0.15s;
      text-align: center;
    }

    body.dark .tpl-card {
      background: #3a3a3c;
    }

    .tpl-card:hover {
      transform: translateY(-2px);
      background: #e8e8ed;
      border-color: #0071e3;
    }

    body.dark .tpl-card:hover {
      background: #48484a;
    }

    .tpl-card.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
    }

    .tpl-card .emoji {
      font-size: 32px;
      margin-bottom: 8px;
    }

    .tpl-card .tname {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .tpl-card .tdesc {
      font-size: 11px;
      color: #86868b;
      line-height: 1.3;
    }

    .modal-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 24px;
    }

    .modal-actions button {
      padding: 10px 20px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
    }

    .modal-actions .cancel {
      background: #f5f5f7;
      color: #1d1d1f;
    }

    body.dark .modal-actions .cancel {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    .modal-actions .create {
      background: #0071e3;
      color: #fff;
    }

    .modal-actions .create:hover {
      background: #0058b0;
    }

    .dissolve-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .dissolve-option {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px;
      border: 2px solid #e8e8ed;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .dissolve-option:hover {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.04);
    }

    body.dark .dissolve-option {
      border-color: #3a3a3c;
    }

    body.dark .dissolve-option:hover {
      background: rgba(0, 113, 227, 0.15);
    }

    .dissolve-option.selected {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
    }

    .dissolve-option .do-emoji {
      font-size: 26px;
      flex-shrink: 0;
    }

    .dissolve-option .do-content {
      flex: 1;
    }

    .dissolve-option .do-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .dissolve-option .do-desc {
      font-size: 12px;
      color: #86868b;
      line-height: 1.35;
    }

    .dissolve-option .do-radio {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #c7c7cc;
      flex-shrink: 0;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    body.dark .dissolve-option .do-radio {
      border-color: #5a5a5e;
    }

    .dissolve-option.selected .do-radio {
      border-color: #0071e3;
    }

    .dissolve-option.selected .do-radio::after {
      content: '';
      width: 10px;
      height: 10px;
      background: #0071e3;
      border-radius: 50%;
    }

    .remember-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 20px;
      padding: 12px 4px;
      font-size: 13px;
      color: #86868b;
      cursor: pointer;
    }

    .remember-row input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: #0071e3;
      cursor: pointer;
    }

    /* ─── Модалка выбора типа связывания ─── */
    #linking-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 5000;
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    #linking-modal.open {
      display: flex;
    }

    .linking-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .linking-option {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 16px;
      border: 2px solid #e8e8ed;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .linking-option:hover {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.04);
    }

    body.dark .linking-option {
      border-color: #3a3a3c;
    }

    body.dark .linking-option:hover {
      background: rgba(0, 113, 227, 0.15);
    }

    .linking-option.selected {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
    }

    .linking-option .lo-emoji {
      font-size: 26px;
      flex-shrink: 0;
    }

    .linking-option .lo-content {
      flex: 1;
    }

    .linking-option .lo-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 4px;
    }

    .linking-option .lo-desc {
      font-size: 12px;
      color: #86868b;
      line-height: 1.35;
    }

    .linking-option .lo-radio {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #c7c7cc;
      flex-shrink: 0;
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    body.dark .linking-option .lo-radio {
      border-color: #5a5a5e;
    }

    .linking-option.selected .lo-radio {
      border-color: #0071e3;
    }

    .linking-option.selected .lo-radio::after {
      content: '';
      width: 10px;
      height: 10px;
      background: #0071e3;
      border-radius: 50%;
    }

    /* ─── Визуал режима связывания ─── */
    /* Курсор crosshair */
    body.linking-mode #canvas-wrapper,
    body.linking-mode .node {
      cursor: crosshair !important;
    }

    /* Пульсация всех нод, кроме источника */
    body.linking-mode .node:not(.linking-source) {
      animation: linkingPulse 1.4s ease-in-out infinite;
    }

    @keyframes linkingPulse {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
      }

      50% {
        box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.4), 0 2px 12px rgba(0, 113, 227, 0.15);
      }
    }

    body.dark.linking-mode .node:not(.linking-source) {
      animation: linkingPulseDark 1.4s ease-in-out infinite;
    }

    @keyframes linkingPulseDark {

      0%,
      100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
      }

      50% {
        box-shadow: 0 0 0 3px rgba(74, 158, 255, 0.5), 0 2px 12px rgba(74, 158, 255, 0.2);
      }
    }

    /* Источник связывания — стабильная оранжевая обводка */
    body.linking-mode .node.linking-source {
      box-shadow: 0 0 0 3px #ff9500, 0 0 20px rgba(255, 149, 0, 0.4) !important;
    }

    /* ───────── [STYLES: editor] Редактор карты ───────── */
    #editor {
      background: #f5f5f7;
    }

    /* Убираем визуальную обводку фокуса, т.к. используем его только для paste */
    #editor:focus {
      outline: none;
    }

    #canvas-wrapper {
      position: absolute;
      inset: 0;
      overflow: hidden;
      background-color: #f5f1eb;
      background-image: radial-gradient(circle, rgba(105, 81, 62, 0.16) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.45), transparent 48%);
      background-size: 24px 24px;
      background-position: 0 0;
      touch-action: none;
    }

    #canvas-wrapper.grid-off {
      background-image: none;
    }


    /* Слой фоновой картинки */
    #canvas-bg-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background-repeat: no-repeat;
      background-position: center;
      transition: opacity 0.2s;
    }

    #canvas-wrapper>#canvas {
      position: relative;
      z-index: 1;
    }


    #canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: 0 0;
      cursor: grab;
    }

    #canvas.dragging {
      cursor: grabbing;
    }


    /* Плавный переход canvas при zoom-to-fit */
    #canvas.smooth-transition {
      transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }


    #svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 1px;
      overflow: visible;
      pointer-events: none;
      /* Линии рисуются до нод и остаются под ними. */
      z-index: auto;
    }

    #edge-overlay-svg {
      position: absolute;
      top: 0;
      left: 0;
      width: 1px;
      height: 1px;
      overflow: visible;
      pointer-events: none;
      z-index: 4;
    }

    #svg path {
      fill: none;
      pointer-events: stroke;
      cursor: pointer;
    }

    #svg path:hover {
      stroke-width: 4 !important;
      opacity: 0.8;
    }

    /* Отдельный наконечник связи должен быть залитым треугольником. */
    #svg path.edge-arrow-head,
    #edge-overlay-svg path.edge-arrow-head {
      fill: var(--edge-arrow-color, currentColor) !important;
      stroke: none !important;
      pointer-events: none !important;
    }

    #selection-box {
      position: fixed;
      border: 1px solid #0071e3;
      background: rgba(0, 113, 227, 0.08);
      pointer-events: none;
      z-index: 500;
      display: none;
    }

    /* ───────── [STYLES: node] Ноды ───────── */
    .node {
      position: absolute;
      z-index: 1;
      min-width: 100px;
      min-height: 44px;
      padding: 10px 14px;
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 5px 14px rgba(68, 49, 34, 0.08), 0 0 0 1px rgba(68, 49, 34, 0.055);
      cursor: move;
      font-size: 14px;
      line-height: 1.4;
      word-wrap: break-word;
      transition: box-shadow 0.15s, background-color 0.25s, background-image 0.3s, color 0.25s, opacity 0.2s, transform 0.2s;
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow: hidden;
    }

    /* Production-декор из Figma: один слой, без плиточного повтора. */
    .node-pattern-layer {
      position: absolute;
      z-index: 0;
      inset: 0;
      pointer-events: none;
      background-repeat: no-repeat;
      opacity: .72;
    }
    .node-pattern-brush {
      background-position: left bottom, right top;
      background-size: 78% auto, 78% auto;
    }
    .node-pattern-leaves {
      background-position: left bottom, right bottom;
      background-size: 62% auto, 62% auto;
    }

    .node > :not(.node-pattern-layer):not(.node-illus-layer):not(.node-deco):not(.node-deco-clip):not(.node-readiness-stripe) {
      position: relative;
      z-index: 2;
    }
    /* Декоративный слой не должен менять геометрию ручки изменения размера. */
    .node > .resize-handle {
      position: absolute !important;
      right: 0 !important;
      bottom: 0 !important;
      left: auto !important;
      top: auto !important;
      z-index: 4;
    }
    .node.style-preset-soft,
    .node.style-preset-botanical { border-radius: 18px; }
    .node.style-preset-business { border-radius: 14px; }
    .node.style-preset-creative { border-radius: 20px 12px 20px 12px; }

    .node:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(68, 49, 34, 0.14), 0 0 0 1px rgba(68, 49, 34, 0.08);
    }

    .node.selected {
      box-shadow: 0 0 0 2px #0071e3, 0 4px 16px rgba(0, 113, 227, 0.25);
    }

    .node.linking-source {
      box-shadow: 0 0 0 2px #ff9500, 0 4px 16px rgba(255, 149, 0, 0.3);
    }

    .node.search-match {
      box-shadow: 0 0 0 2px #ffcc00;
    }

    .node.search-active {
      box-shadow: 0 0 0 3px #ff9500, 0 0 24px rgba(255, 149, 0, 0.5);
      animation: pulse 1.2s ease-in-out infinite;
    }

    @keyframes pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.02);
      }
    }


    .node.pinned {
      cursor: default;
    }

    .node.locked::after {
      content: '🔒';
      position: absolute;
      bottom: 4px;
      right: 6px;
      font-size: 11px;
      opacity: 0.5;
      pointer-events: none;
    }

    .node.is-group {
      background: linear-gradient(135deg, #f5f5f7 0%, #e0e0e5 100%);
      border: 2px dashed rgba(0, 0, 0, 0.18);
      cursor: pointer;
      justify-content: center;
    }

    .node.is-group:hover {
      transform: translateY(-2px);
    }

    .node.is-group .group-label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      font-weight: 600;
      opacity: 0.75;
      background: rgba(0, 0, 0, 0.08);
      padding: 3px 10px;
      border-radius: 20px;
      align-self: flex-start;
    }

    .node.is-group .group-title-big {
      font-size: 16px;
      font-weight: 700;
      margin: 6px 0 4px;
      color: inherit;
    }

    .node.is-group .group-stats {
      font-size: 11px;
      opacity: 0.65;
    }

    .node.is-group.is-open {
      background: linear-gradient(135deg, #d6ecff 0%, #b8dcff 100%);
      border-style: solid;
      border-color: rgba(0, 113, 227, 0.3);
      min-height: 40px;
      justify-content: center;
    }

    .node.is-group.is-open .group-label {
      background: rgba(0, 113, 227, 0.2);
      color: #0071e3;
    }

    body.dark .node.is-group {
      background: linear-gradient(135deg, #3a3a3c 0%, #2c2c2e 100%);
    }

    body.dark .node.is-group.is-open {
      background: linear-gradient(135deg, #1e4976 0%, #163a5f 100%);
    }

    .node.font-sans {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .node.font-serif {
      font-family: Georgia, "Times New Roman", serif;
    }

    .node.font-mono {
      font-family: "SF Mono", Monaco, Consolas, monospace;
    }

    .node.font-rounded {
      font-family: "SF Pro Rounded", ui-rounded, "Varela Round", -apple-system, "Segoe UI", sans-serif;
    }
    .node.font-humanist { font-family: "Gill Sans", "Gill Sans MT", "Trebuchet MS", Calibri, sans-serif; }
    .node.font-geometric { font-family: Futura, "Century Gothic", "Avenir Next", Avenir, "Trebuchet MS", sans-serif; }
    .node.font-condensed { font-family: "Avenir Next Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; }
    .node.font-classic { font-family: "Palatino Linotype", Palatino, "Book Antiqua", "Iowan Old Style", serif; }
    .node.font-display { font-family: Impact, "Arial Black", "Haettenschweiler", sans-serif; }
    .node.font-hand { font-family: "Bradley Hand", "Segoe Print", "Marker Felt", "Comic Sans MS", cursive; }
    .node.font-typewriter { font-family: "American Typewriter", "Courier New", Courier, monospace; }

    .node .node-title {
      background-color: var(--node-title-hl, transparent);
      font-weight: 700;
      font-size: var(--node-title-size, 15px);
      outline: none;
      width: 100%;
      border: none;
      color: var(--node-title-color, inherit);
      padding: 0;
      display: block;
      opacity: 0;
      height: 0;
      overflow: hidden;
      transition: opacity 0.15s, height 0.15s;
    }

    .node.has-title .node-title,
    .node.selected .node-title {
      opacity: 1;
      height: auto;
      min-height: 1em;
    }

    .node .node-title::placeholder {
      color: inherit;
      opacity: 0.35;
      font-weight: 400;
    }

    .node .node-title:focus::placeholder {
      opacity: 0.25;
    }

    .node .node-body {
      width: 100%;
      border: none;
      outline: none;
      resize: none;
      font: inherit;
      color: inherit;
      background: transparent;
      overflow-y: auto;
      overflow-x: hidden;
      flex: 1;
      text-align: inherit;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
      user-select: text;
      -webkit-user-select: text;
    }


    /* ─── Markdown: вид просмотра ─── */
    .node .md-view {
      width: 100%;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      text-align: inherit;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
      line-height: 1.5;
      word-wrap: break-word;
      cursor: text;
      user-select: text;
      -webkit-user-select: text;
    }


    /* ─── Панель форматирования Markdown ─── */
    .md-toolbar {
      display: flex;
      align-items: center;
      gap: 2px;
      padding: 4px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 10px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
      user-select: none;
      flex-wrap: wrap;
    }

    .md-toolbar .md-btn {
      width: 28px;
      height: 28px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      font-family: inherit;
      padding: 0;
    }

    .md-toolbar .md-btn:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    .md-toolbar .md-btn:active {
      background: rgba(0, 0, 0, 0.12);
    }

    .md-toolbar .md-btn.active {
      background: #0071e3;
      color: #fff;
    }

    .md-toolbar .md-btn.md-btn-h {
      font-weight: 700;
      font-size: 12px;
      width: 32px;
    }

    .md-toolbar .md-btn.md-btn-b {
      font-weight: 700;
    }

    .md-toolbar .md-btn.md-btn-i {
      font-style: italic;
      font-family: Georgia, serif;
    }

    .md-toolbar .md-btn.md-btn-s {
      text-decoration: line-through;
    }

    .md-toolbar .md-divider {
      width: 1px;
      height: 20px;
      background: rgba(0, 0, 0, 0.08);
      margin: 0 4px;
      flex-shrink: 0;
    }

    /* Плавающая панель над нодой */
    #floating-md-toolbar {
      position: fixed;
      z-index: 2000;
      display: none;
      transform: translateY(-100%);
      margin-top: -8px;
    }

    #floating-md-toolbar.open {
      display: flex;
    }

    /* Стационарная панель в правой панели */
    .md-toolbar-inline {
      margin-bottom: 6px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
      background: #fafafa;
    }

    body.dark .md-toolbar,
    body.dark .md-toolbar-inline {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    body.dark .md-toolbar .md-btn,
    body.dark .md-toolbar-inline .md-btn {
      color: #f5f5f7;
    }

    body.dark .md-toolbar .md-btn:hover,
    body.dark .md-toolbar-inline .md-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark .md-toolbar .md-btn.active,
    body.dark .md-toolbar-inline .md-btn.active {
      background: #0071e3;
      color: #fff;
    }

    body.dark .md-toolbar .md-divider,
    body.dark .md-toolbar-inline .md-divider {
      background: rgba(255, 255, 255, 0.1);
    }


    .node .md-view::-webkit-scrollbar {
      width: 6px;
    }

    .node .md-view::-webkit-scrollbar-track {
      background: transparent;
    }

    .node .md-view::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }

    .node .md-view::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.35);
    }

    body.dark .node .md-view {
      scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    body.dark .node .md-view::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.25);
    }

    body.dark .node .md-view::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.4);
    }

    /* Markdown-элементы */
    .md-view p {
      margin: 0 0 6px 0;
    }

    .md-view p:last-child {
      margin-bottom: 0;
    }

    .md-view h1 {
      font-size: 1.5em;
      font-weight: 700;
      margin: 8px 0 6px;
      line-height: 1.3;
    }

    .md-view h2 {
      font-size: 1.3em;
      font-weight: 700;
      margin: 8px 0 4px;
      line-height: 1.3;
    }

    .md-view h3 {
      font-size: 1.1em;
      font-weight: 700;
      margin: 6px 0 4px;
      line-height: 1.3;
    }

    .md-view h1:first-child,
    .md-view h2:first-child,
    .md-view h3:first-child {
      margin-top: 0;
    }

    .md-view strong {
      font-weight: 700;
    }

    .md-view em {
      font-style: italic;
    }

    .md-view del {
      text-decoration: line-through;
      opacity: 0.7;
    }

    .md-view code {
      background: rgba(0, 0, 0, 0.08);
      padding: 1px 5px;
      border-radius: 4px;
      font-family: "SF Mono", Monaco, Consolas, monospace;
      font-size: 0.9em;
    }

    body.dark .md-view code {
      background: rgba(255, 255, 255, 0.12);
    }

    .md-view a {
      color: #0071e3;
      text-decoration: none;
      border-bottom: 1px solid rgba(0, 113, 227, 0.3);
    }

    .md-view a:hover {
      border-bottom-color: #0071e3;
    }

    .md-view ul,
    .md-view ol {
      margin: 4px 0 6px;
      padding-left: 20px;
    }

    .md-view ul:last-child,
    .md-view ol:last-child {
      margin-bottom: 0;
    }

    .md-view li {
      margin: 2px 0;
    }

    .md-view ul li::marker {
      color: inherit;
      opacity: 0.6;
    }

    .md-view ol li::marker {
      color: inherit;
      opacity: 0.6;
      font-weight: 600;
    }

    .md-view blockquote {
      border-left: 3px solid rgba(0, 0, 0, 0.15);
      padding: 2px 0 2px 10px;
      margin: 4px 0;
      opacity: 0.8;
      font-style: italic;
    }

    body.dark .md-view blockquote {
      border-left-color: rgba(255, 255, 255, 0.2);
    }

    .md-view hr {
      border: none;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      margin: 8px 0;
    }

    body.dark .md-view hr {
      border-top-color: rgba(255, 255, 255, 0.15);
    }


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

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

    .node .node-body::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }

    .node .node-body::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.35);
    }

    body.dark .node .node-body {
      scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    body.dark .node .node-body::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.25);
    }

    body.dark .node .node-body::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.4);
    }

    .node img {
      max-width: 100%;
      max-height: 200px;
      border-radius: 8px;
      object-fit: cover;
      pointer-events: auto;
      cursor: zoom-in;
      display: block;
      margin: 0 auto;
    }

    /* ─── Бейдж даты в ноде ─── */
    .node-date {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      align-self: flex-start;
      margin-top: 4px;
      background: rgba(0, 0, 0, 0.06);
      color: inherit;
      opacity: 0.85;
    }

    .node-date.soon {
      background: rgba(255, 204, 0, 0.2);
      color: #b8860b;
    }

    .node-date.today {
      background: rgba(52, 199, 89, 0.2);
      color: #1a7a35;
    }

    .node-date.overdue {
      background: rgba(255, 59, 48, 0.18);
      color: #c9241d;
    }


    /* ─── Бейдж таймера в ноде ─── */
    .node-timer {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 11px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 12px;
      align-self: flex-start;
      margin-top: 4px;
      background: rgba(0, 0, 0, 0.06);
      color: inherit;
      opacity: 0.9;
      font-variant-numeric: tabular-nums;
      transition: background 0.3s;
    }

    .node-timer.running {
      background: rgba(52, 199, 89, 0.2);
      color: #1a7a35;
    }

    .node-timer.paused {
      background: rgba(255, 204, 0, 0.22);
      color: #b8860b;
    }

    .node-timer.finished {
      background: rgba(255, 59, 48, 0.18);
      color: #c9241d;
      animation: timer-pulse 1s ease-in-out 3;
    }

    .node-timer .timer-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: currentColor;
      opacity: 0.7;
    }

    .node-timer.running .timer-dot {
      opacity: 1;
      animation: timer-dot-pulse 1s infinite;
    }

    @keyframes timer-dot-pulse {

      0%,
      100% {
        transform: scale(1);
        opacity: 1;
      }

      50% {
        transform: scale(1.4);
        opacity: 0.6;
      }
    }

    @keyframes timer-pulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }
    }

    body.dark .node-timer.running {
      color: #5dd67a;
    }

    body.dark .node-timer.paused {
      color: #ffcc00;
    }

    body.dark .node-timer.finished {
      color: #ff6b5e;
    }


    /* ─── Диаграммы в нодах ─── */
    .node-chart {
      margin-top: 6px;
      align-self: stretch;
    }

    .node-chart .chart-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      font-weight: 600;
      margin-bottom: 4px;
      opacity: 0.85;
    }

    /* Прогресс-бар */
    .node-chart-progress {
      width: 100%;
      height: 8px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      overflow: hidden;
    }

    .node-chart-progress-fill {
      height: 100%;
      border-radius: 4px;
      transition: width 0.3s ease-out;
    }

    /* Круговая */
    .node-chart-circle-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 4px 0;
    }

    .node-chart-circle {
      position: relative;
      width: 60px;
      height: 60px;
      flex-shrink: 0;
    }

    .node-chart-circle svg {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }

    .node-chart-circle-text {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 700;
      color: inherit;
    }

    /* Шкала */
    .node-chart-gauge {
      position: relative;
      width: 100%;
      height: 20px;
      display: flex;
      align-items: center;
    }

    .node-chart-gauge-track {
      width: 100%;
      height: 6px;
      border-radius: 3px;
      position: relative;
      /* По умолчанию — под светлый фон */
      background: rgba(0, 0, 0, 0.22);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    }

    /* Адаптация под фон ноды */
    .node-chart.chart-on-light .node-chart-gauge-track {
      background: rgba(0, 0, 0, 0.24);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    }

    .node-chart.chart-on-dark .node-chart-gauge-track {
      background: rgba(255, 255, 255, 0.3);
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    }

    /* Прогресс-бар — тоже адаптивный */
    .node-chart.chart-on-dark .node-chart-progress {
      background: rgba(255, 255, 255, 0.2);
    }

    .node-chart.chart-on-light .node-chart-progress {
      background: rgba(0, 0, 0, 0.1);
    }

    .node-chart-gauge-dot {
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 3px solid #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
      transition: left 0.3s ease-out;
    }

    body.dark .node-chart-gauge-dot {
      border-color: #2c2c2e;
    }

    body.theme-academy .node-chart-gauge-dot {
      border-color: #1a1f2e;
    }

    body.theme-neon .node-chart-gauge-dot {
      border-color: #0a0e27;
    }

    /* Панель настройки диаграммы */
    .chart-value-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 8px;
    }

    .chart-value-slider {
      flex: 1;
      accent-color: #0071e3;
    }

    .chart-value-number {
      width: 60px;
      padding: 6px 8px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 13px;
      outline: none;
      background: #fff;
      color: #1d1d1f;
      text-align: center;
      font-family: inherit;
    }

    .chart-value-number:focus {
      border-color: #0071e3;
    }

    body.dark .chart-value-number,
    body.theme-academy .chart-value-number {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.theme-neon .chart-value-number {
      background: #1a1f45;
      border-color: #2d3a6a;
      color: #e8f0ff;
    }


    /* Панель управления таймером в side-panel */
    .panel-timer-display {
      font-size: 28px;
      font-weight: 700;
      text-align: center;
      padding: 12px;
      border-radius: 10px;
      background: #f5f5f7;
      color: #1d1d1f;
      margin-bottom: 8px;
      font-variant-numeric: tabular-nums;
      letter-spacing: 0.02em;
      transition: background 0.3s;
    }

    .panel-timer-display.running {
      background: rgba(52, 199, 89, 0.15);
      color: #1a7a35;
    }

    .panel-timer-display.paused {
      background: rgba(255, 204, 0, 0.15);
      color: #b8860b;
    }

    .panel-timer-display.finished {
      background: rgba(255, 59, 48, 0.15);
      color: #c9241d;
    }

    body.dark .panel-timer-display {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .panel-timer-display.running {
      color: #5dd67a;
    }

    body.dark .panel-timer-display.paused {
      color: #ffcc00;
    }

    body.dark .panel-timer-display.finished {
      color: #ff6b5e;
    }


    /* Поле ввода минут для таймера */
    .timer-custom-input {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fff;
      color: #1d1d1f;
      font-family: inherit;
      transition: border-color 0.15s;
    }

    .timer-custom-input:focus {
      border-color: #0071e3;
    }

    .timer-custom-input::placeholder {
      color: #86868b;
    }

    body.dark .timer-custom-input,
    body.theme-academy .timer-custom-input {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.dark .timer-custom-input::placeholder,
    body.theme-academy .timer-custom-input::placeholder {
      color: #a1a1a6;
    }

    body.theme-neon .timer-custom-input {
      background: #1a1f45;
      border-color: #2d3a6a;
      color: #e8f0ff;
    }

    body.theme-neon .timer-custom-input::placeholder {
      color: #8a9bc7;
    }


    .timer-preset-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-top: 8px;
    }

    .timer-preset-btn {
      padding: 8px 4px;
      background: #f5f5f7;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: #1d1d1f;
      transition: all 0.1s;
    }

    .timer-preset-btn:hover {
      background: #e8e8ed;
    }

    body.dark .timer-preset-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .timer-preset-btn:hover {
      background: #48484a;
    }

    .timer-control-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-top: 8px;
    }

    .timer-control-btn {
      padding: 10px 4px;
      background: #0071e3;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      transition: background 0.15s;
    }

    .timer-control-btn:hover {
      background: #0058b0;
    }

    .timer-control-btn.secondary {
      background: #f5f5f7;
      color: #1d1d1f;
    }

    .timer-control-btn.secondary:hover {
      background: #e8e8ed;
    }

    body.dark .timer-control-btn.secondary {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .timer-control-btn.secondary:hover {
      background: #48484a;
    }


    body.dark .node-date.soon {
      color: #ffcc00;
    }

    body.dark .node-date.today {
      color: #5dd67a;
    }

    body.dark .node-date.overdue {
      color: #ff6b5e;
    }

    /* Дата в панели (поля) */
    .panel-date-row {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-top: 6px;
    }

    .panel-date-row input[type="date"] {
      flex: 1;
      padding: 8px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fff;
      color: inherit;
      font-family: inherit;
    }

    .panel-date-row input[type="date"]:focus {
      border-color: #0071e3;
    }

    body.dark .panel-date-row input[type="date"] {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    .panel-date-row button {
      padding: 8px 12px;
      background: #f5f5f7;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: #1d1d1f;
    }

    .panel-date-row button:hover {
      background: #e8e8ed;
    }

    body.dark .panel-date-row button {
      background: #3a3a3c;
      color: #f5f5f7;
    }


    .node-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 4px;
    }

    .node-tag {
      font-size: 10px;
      padding: 2px 6px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      color: inherit;
      opacity: 0.75;
    }

    /* ─── Формы нод v2 ─── */

    /* Прямоугольник — по умолчанию, стили не нужны */

    /* Стикер — острые углы + тень, эффект "бумажка" */
    .node.shape-sticker {
      border-radius: 2px !important;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    /* Облако — очень мягкое скругление */
    .node.shape-cloud {
      border-radius: 60px !important;
      padding-left: 28px;
      padding-right: 28px;
    }

    /* Капсула — скругление = половина высоты.
       Выглядит как "таблетка", текст по центру.
       НЕ блокируем resize — можно менять высоту. */
    .node.shape-pill {
      border-radius: 9999px !important;
      padding-left: 28px;
      padding-right: 28px;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* Капсула: заголовок и описание — по центру */
    .node.shape-pill .node-title,
    .node.shape-pill .md-view,
    .node.shape-pill .node-body {
      text-align: center;
    }

    /* Круг — 50% скругление.
       НЕ задаём aspect-ratio: пользователь сам решает — круг или овал.
       При resize круг становится эллипсом — это ОК. */
    .node.shape-circle, .node.shape-ellipse {
      border-radius: 50% !important;
      /* Вместо padding — маленький фиксированный отступ.
         Остальное компенсируем через ::before-«сейф-зону» — см. ниже. */
      padding: 12px !important;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      /* Контент не должен выходить за границы круга — разрешаем скролл */
      overflow: hidden;
    }

    /* Круг: заголовок и описание — по центру */
    .node.shape-circle .node-title, .node.shape-ellipse .node-title,
    .node.shape-circle .md-view, .node.shape-ellipse .md-view,
    .node.shape-circle .node-body, .node.shape-ellipse .node-body {
      text-align: center;
    }

    /* Круг: сжимаем заголовок, чтобы влезал */
    .node.shape-circle .node-title, .node.shape-ellipse .node-title {
      font-size: calc(var(--node-title-size, 15px) * 0.85);
    }

    .node.shape-circle .md-view, .node.shape-ellipse .md-view {
      font-size: calc(var(--node-text-size, 14px) * 0.9);
    }

    /* Круг: контент внутри имеет свои размеры.
       flex: 0 1 auto — не растягиваемся, но сжимаемся, если не влезает.
       min-height: 0 — фикс для flexbox (иначе не появится скролл). */
    .node.shape-circle .md-view, .node.shape-ellipse .md-view,
    .node.shape-circle .node-body, .node.shape-ellipse .node-body {
      flex: 0 1 auto;
      min-height: 0;
      width: 100%;
      max-height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 4px;
    }

    /* Круг: заголовок — тоже не растягиваем */
    .node.shape-circle .node-title, .node.shape-ellipse .node-title {
      flex: 0 0 auto;
      width: 100%;
    }

    /* Круг: картинки/теги/бейджи — тоже не растягиваем */
    .node.shape-circle img,
    .node.shape-circle .node-tags,
    .node.shape-circle .node-date,
    .node.shape-circle .node-timer,
    .node.shape-circle .node-chart {
      flex: 0 0 auto;
      max-width: 100%;
    }

    /* ─── Resize-handle для круглых форм ─── */
    /* У круга угол "вырезан" скруглением — ручка в углу была бы невидима.
       Смещаем вниз-вправо и делаем заметнее. */
    /* Ручка для круга — рисуем как яркую точку внутри видимой области.
       Позиционируем по дуге круга в правом нижнем углу. */
    .node.shape-circle .resize-handle, .node.shape-ellipse .resize-handle {
      /* 25% от угла — внутри видимой области круга */
      right: 18%;
      bottom: 18%;
      width: 18px;
      height: 18px;
      border-radius: 50% !important;
      background: #0071e3;
      border: 2px solid #fff;
      box-shadow: 0 2px 6px rgba(0, 113, 227, 0.5);
      z-index: 3;
      cursor: nwse-resize;
    }

    .node.shape-circle .resize-handle:hover {
      background: #0058b0;
      transform: scale(1.15);
      transition: transform 0.1s;
    }

    .node.shape-pill .resize-handle {
      right: 14px;
      bottom: 4px;
      border-bottom-right-radius: 8px;
    }

    .node.shape-cloud .resize-handle {
      right: 16px;
      bottom: 8px;
      border-bottom-right-radius: 20px;
    }


    /* ─── Градиент: чисто визуальный класс, ничего не ломает ─── */
    .node.has-gradient {
      /* background подставляется инлайн через JS */
    }

    .node-checklist {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex: 1;
      overflow-y: auto;
      overflow-x: hidden;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    }

    .node-checklist::-webkit-scrollbar {
      width: 6px;
    }

    .node-checklist::-webkit-scrollbar-track {
      background: transparent;
    }

    .node-checklist::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }

    .node-checklist::-webkit-scrollbar-thumb:hover {
      background: rgba(0, 0, 0, 0.35);
    }

    body.dark .node-checklist {
      scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    }

    body.dark .node-checklist::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.25);
    }

    body.dark .node-checklist::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.4);
    }

    .check-item {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      font-size: 1em;
      line-height: 1.35;
    }

    .check-item input[type="checkbox"] {
      margin-top: 3px;
      cursor: pointer;
      flex-shrink: 0;
      accent-color: #0071e3;
    }

    .check-item .check-text {
      flex: 1;
      outline: none;
      word-wrap: break-word;
      min-height: 18px;
    }

    .check-item .check-text[contenteditable="true"] {
      background: rgba(0, 113, 227, 0.06);
      border-radius: 3px;
      padding: 0 3px;
      margin: -1px;
    }

    .check-item.checked .check-text {
      text-decoration: line-through;
      opacity: 0.55;
    }

    .check-add {
      font-size: 0.85em;
      color: #0071e3;
      cursor: pointer;
      padding: 2px 4px;
      border-radius: 4px;
      align-self: flex-start;
      margin-top: 2px;
      opacity: 0.7;
    }

    .check-add:hover {
      opacity: 1;
      background: rgba(0, 113, 227, 0.08);
    }


    /* ─── Нода-карта (вложенная карта) ─── */
    .node-map {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
      min-width: 0;
    }

    .node-map .map-icon {
      font-size: 22px;
      align-self: flex-start;
      line-height: 1;
    }

    .node-map .map-target {
      font-size: 14px;
      font-weight: 600;
      word-wrap: break-word;
      color: inherit;
    }

    .node-map .map-meta {
      font-size: 11px;
      opacity: 0.65;
      line-height: 1.4;
    }

    .node-map .map-empty {
      font-size: 12px;
      opacity: 0.55;
      font-style: italic;
    }

    .node-map .map-open-hint {
      font-size: 11px;
      opacity: 0.5;
      margin-top: 2px;
    }

    /* Иконка в углу ноды-карты */
    .node.is-map::after {
      content: '↗';
      position: absolute;
      top: 6px;
      right: 8px;
      font-size: 12px;
      opacity: 0.35;
      pointer-events: none;
    }


    .node-link {
      display: flex;
      flex-direction: column;
      gap: 6px;
      flex: 1;
    }

    .node-link .link-icon {
      font-size: 20px;
      align-self: flex-start;
    }

    .node-link .link-url {
      font-size: 0.9em;
      color: #0071e3;
      text-decoration: none;
      word-break: break-all;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 4px;
    }

    .node-link .link-url:hover {
      background: rgba(0, 113, 227, 0.1);
      text-decoration: underline;
    }

    .node-link .link-title {
      font-size: 0.85em;
      opacity: 0.7;
    }

    /* ─── Kanban-нода ─── */
    .node.is-kanban {
      padding: 0;
      overflow: hidden;
      background: #f5f5f7;
      display: flex;
      flex-direction: column;
    }

    body.dark .node.is-kanban,
    body.theme-academy .node.is-kanban,
    body.theme-neon .node.is-kanban {
      background: #2c2c2e;
    }

    .kanban-wrap {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }

    .kanban-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.6);
      flex-shrink: 0;
    }

    body.dark .kanban-header {
      background: rgba(0, 0, 0, 0.15);
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .kanban-title {
      font-size: 14px;
      font-weight: 700;
      outline: none;
      flex: 1;
      min-width: 0;
      word-wrap: break-word;
    }

    .kanban-dissolve {
      padding: 4px 10px;
      border: none;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      color: inherit;
      font-family: inherit;
      flex-shrink: 0;
      transition: background 0.15s;
    }

    .kanban-dissolve:hover {
      background: rgba(0, 0, 0, 0.12);
    }

    body.dark .kanban-dissolve {
      background: rgba(255, 255, 255, 0.1);
    }

    body.dark .kanban-dissolve:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .kanban-columns {
      display: flex;
      flex: 1;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
    }

    .kanban-columns::-webkit-scrollbar {
      height: 6px;
    }

    .kanban-columns::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }

    .kanban-column {
      width: 250px;
      flex-shrink: 0;
      border-right: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    body.dark .kanban-column {
      border-right-color: rgba(255, 255, 255, 0.06);
    }

    .kanban-column:last-child {
      border-right: none;
    }

    .kanban-col-title {
      font-size: 13px;
      font-weight: 700;
      padding: 10px 12px 4px;
      word-wrap: break-word;
      cursor: default;
    }

    .kanban-col-count {
      font-size: 10px;
      color: #86868b;
      padding: 0 12px 8px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      font-weight: 600;
    }

    .kanban-col-list {
      flex: 1;
      overflow-y: auto;
      padding: 4px 8px 8px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }

    .kanban-col-list::-webkit-scrollbar {
      width: 4px;
    }

    .kanban-col-list::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 2px;
    }

    .kanban-card {
      background: #fff;
      border-radius: 6px;
      padding: 6px 8px;
      font-size: 11px;
      line-height: 1.35;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
      cursor: pointer;
      word-wrap: break-word;
      transition: box-shadow 0.15s, transform 0.1s;
    }

    .kanban-card:hover {
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.06);
    }

    .kanban-card.kanban-more {
      background: transparent;
      box-shadow: none;
      color: #86868b;
      font-style: italic;
      text-align: center;
      cursor: default;
    }

    body.dark .kanban-card {
      background: #3a3a3c;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    body.dark .kanban-card.kanban-more {
      background: transparent;
      box-shadow: none;
    }

    /* ─── Kanban: drag-n-drop ─── */
    .kanban-card {
      cursor: grab;
      user-select: none;
    }

    .kanban-card:active {
      cursor: grabbing;
    }

    .kanban-card.dragging {
      opacity: 0.4;
      cursor: grabbing;
    }

    .kanban-col-list.drop-target {
      background: rgba(0, 113, 227, 0.08);
      border-radius: 6px;
      outline: 2px dashed rgba(0, 113, 227, 0.4);
      outline-offset: -4px;
    }

    /* Плейсхолдер — куда встанет карточка */
    .kanban-drop-indicator {
      height: 2px;
      background: #0071e3;
      border-radius: 2px;
      margin: 2px 0;
      pointer-events: none;
      box-shadow: 0 0 6px rgba(0, 113, 227, 0.6);
    }

    /* ─── Kanban: кнопка «+ Добавить карточку» ─── */
    .kanban-add-card {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      padding: 6px 8px;
      margin-top: 4px;
      background: transparent;
      border: 1px dashed rgba(0, 0, 0, 0.15);
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
      color: #86868b;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      width: 100%;
      text-align: center;
    }

    .kanban-add-card:hover {
      background: rgba(0, 113, 227, 0.06);
      border-color: rgba(0, 113, 227, 0.4);
      color: #0071e3;
    }

    body.dark .kanban-add-card {
      border-color: rgba(255, 255, 255, 0.15);
      color: #a1a1a6;
    }

    body.dark .kanban-add-card:hover {
      background: rgba(0, 113, 227, 0.15);
      color: #4a9eff;
      border-color: rgba(74, 158, 255, 0.5);
    }

    /* ─── Kanban: инлайн-инпут новой карточки ─── */
    .kanban-new-card-input {
      width: 100%;
      padding: 6px 8px;
      margin-top: 4px;
      background: #fff;
      border: 2px solid #0071e3;
      border-radius: 6px;
      font-size: 11px;
      font-family: inherit;
      color: #1d1d1f;
      outline: none;
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
    }

    body.dark .kanban-new-card-input {
      background: #2c2c2e;
      color: #f5f5f7;
    }

    /* ─── Kanban: inline-редактирование карточки ─── */
    .kanban-card .kc-edit {
      width: 100%;
      background: transparent;
      border: none;
      outline: none;
      font: inherit;
      color: inherit;
      padding: 0;
      resize: none;
      overflow: hidden;
      font-family: inherit;
    }

    /* ─── Kanban: карточка в режиме редактирования ─── */
    .kanban-card.editing {
      box-shadow: 0 0 0 2px #0071e3, 0 2px 6px rgba(0, 113, 227, 0.3);
    }


    .resize-handle {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 16px;
      height: 16px;
      cursor: nwse-resize;
      background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.15) 50%);
      border-bottom-right-radius: 12px;
      display: none;
    }

    .node.selected .resize-handle {
      display: block;
    }

    /* ───────── [STYLES: drawing] Режим рисования ───────── */
    #drawing-panel {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      align-items: center;
      gap: 0;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 6px;
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
      z-index: 1000;
      transition: left 0.2s ease, right 0.2s ease, transform 0.2s ease;
      max-width: calc(100vw - 40px);
    }

    #drawing-panel.open {
      display: flex;
    }

    /* Умное позиционирование: когда левая панель открыта */
    body.drawing-mode.left-open #drawing-panel {
      left: 296px;
      transform: translateX(0);
    }

    /* Умное позиционирование: когда правая панель открыта */
    body.drawing-mode.right-open #drawing-panel {
      right: 316px;
      left: auto;
      transform: translateX(0);
    }

    /* Обе панели открыты — центрируем между ними */
    body.drawing-mode.left-open.right-open #drawing-panel {
      left: 296px;
      right: 316px;
      transform: translateX(0);
      justify-content: center;
    }

    /* Подсказка и zoom — поднимаем при рисовании */
    body.drawing-mode #hint {
      bottom: 90px;
    }

    body.drawing-mode #zoom-indicator {
      bottom: 90px;
    }

    /* Кнопка закрытия — в правом верхнем углу панели */
    #drawing-panel .dp-close {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      border: none;
      background: #fff;
      border-radius: 50%;
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1d1d1f;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
      padding: 0;
      transition: background 0.15s;
    }

    #drawing-panel .dp-close:hover {
      background: #f5f5f7;
    }

    /* Кнопки инструментов */
    #drawing-panel .dp-btn {
      width: 36px;
      height: 36px;
      border: none;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      color: #1d1d1f;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      padding: 0;
      font-family: inherit;
      flex-shrink: 0;
    }

    #drawing-panel .dp-btn:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    #drawing-panel .dp-btn.active {
      background: #0071e3;
      color: #fff;
    }

    #drawing-panel .dp-divider {
      width: 1px;
      height: 24px;
      background: rgba(0, 0, 0, 0.08);
      margin: 0 6px;
      flex-shrink: 0;
    }

    /* Подсказка про Shift в панели рисования */
    #drawing-panel .dp-hint {
      font-size: 11px;
      color: #86868b;
      padding: 0 10px;
      white-space: nowrap;
      user-select: none;
      font-weight: 500;
    }

    body.dark #drawing-panel .dp-hint,
    body.theme-academy #drawing-panel .dp-hint,
    body.theme-neon #drawing-panel .dp-hint {
      color: #a1a1a6;
    }

    /* Цвета */
    #drawing-panel .dp-colors {
      display: flex;
      gap: 4px;
      align-items: center;
    }

    #drawing-panel .dp-color {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.1s, border-color 0.15s;
      flex-shrink: 0;
    }

    #drawing-panel .dp-color:hover {
      transform: scale(1.1);
    }

    #drawing-panel .dp-color.active {
      border-color: #0071e3;
      box-shadow: 0 0 0 2px #fff inset;
    }

    /* Палитра (кастомный цвет) */
    #drawing-panel .dp-color-picker {
      position: relative;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      cursor: pointer;
      flex-shrink: 0;
      background: conic-gradient(from 0deg, #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0080ff, #8000ff, #ff0080, #ff0000);
      border: 2px solid transparent;
      transition: transform 0.1s;
    }

    #drawing-panel .dp-color-picker:hover {
      transform: scale(1.1);
    }

    #drawing-panel .dp-color-picker input {
      position: absolute;
      inset: 0;
      opacity: 0;
      cursor: pointer;
      width: 100%;
      height: 100%;
    }

    /* ─── Заливка ─── */
    #drawing-panel .dp-fill-wrap {
      position: relative;
      display: none;
    }

    #drawing-panel .dp-fill-wrap.visible {
      display: block;
    }

    #drawing-panel .dp-fill-btn.active {
      background: #0071e3;
      color: #fff;
    }

    #drawing-panel .dp-fill-menu {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 8px;
      background: #fff;
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
      display: none;
      flex-direction: column;
      gap: 8px;
      min-width: 200px;
    }

    #drawing-panel .dp-fill-menu.open {
      display: flex;
    }

    #drawing-panel .dp-fill-menu .dm-label {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    #drawing-panel .dp-fill-menu .dm-colors {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }

    #drawing-panel .dp-fill-menu .dm-color {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.1s;
    }

    #drawing-panel .dp-fill-menu .dm-color:hover {
      transform: scale(1.1);
    }

    #drawing-panel .dp-fill-menu .dm-color.active {
      border-color: #0071e3;
      box-shadow: 0 0 0 2px #fff inset;
    }

    #drawing-panel .dp-fill-menu .dm-slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #drawing-panel .dp-fill-menu .dm-slider-row input[type="range"] {
      flex: 1;
      accent-color: #0071e3;
    }

    #drawing-panel .dp-fill-menu .dm-value {
      font-size: 11px;
      font-weight: 600;
      color: #1d1d1f;
      min-width: 32px;
      text-align: right;
    }

    body.dark #drawing-panel .dp-fill-menu {
      background: #2c2c2e;
    }

    body.dark #drawing-panel .dp-fill-menu .dm-value {
      color: #f5f5f7;
    }

    /* ─── Text-инструмент ─── */
    #drawing-text-input {
      position: absolute;
      z-index: 2500;
      display: none;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid #0071e3;
      border-radius: 8px;
      padding: 6px 10px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      font-weight: 500;
      outline: none;
      box-shadow: 0 8px 24px rgba(0, 113, 227, 0.25);
      min-width: 120px;
    }

    #drawing-text-input.open {
      display: block;
    }

    body.dark #drawing-text-input {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    /* ─── Выделение штриха ─── */
    #draw-svg path.selected-stroke,
    #draw-svg circle.selected-stroke,
    #draw-svg ellipse.selected-stroke,
    #draw-svg g.selected-stroke path,
    #draw-svg text.selected-stroke {
      filter: drop-shadow(0 0 5px rgba(0, 113, 227, 0.9));
      stroke: #0071e3 !important;
      opacity: 1 !important;
    }

    /* Курсор в режиме выделения */
    #draw-svg.drawing-active.tool-select {
      cursor: default;
    }

    /* Text-инструмент — курсор-текст */
    #draw-svg.drawing-active.tool-text {
      cursor: text;
    }

    /* ─── Заливка ─── */
    #drawing-panel .dp-fill-wrap {
      position: relative;
      display: none;
    }

    #drawing-panel .dp-fill-wrap.visible {
      display: block;
    }

    #drawing-panel .dp-fill-btn.active {
      background: #0071e3;
      color: #fff;
    }

    #drawing-panel .dp-fill-menu {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 8px;
      background: #fff;
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
      display: none;
      flex-direction: column;
      gap: 8px;
      min-width: 200px;
    }

    #drawing-panel .dp-fill-menu.open {
      display: flex;
    }

    #drawing-panel .dp-fill-menu .dm-label {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    #drawing-panel .dp-fill-menu .dm-colors {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }

    #drawing-panel .dp-fill-menu .dm-color {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 6px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.1s;
    }

    #drawing-panel .dp-fill-menu .dm-color:hover {
      transform: scale(1.1);
    }

    #drawing-panel .dp-fill-menu .dm-color.active {
      border-color: #0071e3;
      box-shadow: 0 0 0 2px #fff inset;
    }

    #drawing-panel .dp-fill-menu .dm-slider-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    #drawing-panel .dp-fill-menu .dm-slider-row input[type="range"] {
      flex: 1;
      accent-color: #0071e3;
    }

    #drawing-panel .dp-fill-menu .dm-value {
      font-size: 11px;
      font-weight: 600;
      color: #1d1d1f;
      min-width: 32px;
      text-align: right;
    }

    body.dark #drawing-panel .dp-fill-menu {
      background: #2c2c2e;
    }

    body.dark #drawing-panel .dp-fill-menu .dm-value {
      color: #f5f5f7;
    }

    /* ─── Text-инструмент ─── */
    #drawing-text-input {
      position: absolute;
      z-index: 2500;
      display: none;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 2px solid #0071e3;
      border-radius: 8px;
      padding: 6px 10px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      font-size: 16px;
      font-weight: 500;
      outline: none;
      box-shadow: 0 8px 24px rgba(0, 113, 227, 0.25);
      min-width: 120px;
    }

    #drawing-text-input.open {
      display: block;
    }

    body.dark #drawing-text-input {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    /* ─── Выделение штриха ─── */
    #draw-svg path.selected-stroke,
    #draw-svg circle.selected-stroke,
    #draw-svg ellipse.selected-stroke,
    #draw-svg g.selected-stroke path,
    #draw-svg text.selected-stroke {
      filter: drop-shadow(0 0 5px rgba(0, 113, 227, 0.9));
      stroke: #0071e3 !important;
      opacity: 1 !important;
    }

    /* Курсор в режиме выделения */
    #draw-svg.drawing-active.tool-select {
      cursor: default;
    }

    /* Text-инструмент — курсор-текст */
    #draw-svg.drawing-active.tool-text {
      cursor: text;
    }

    /* Толщина — выпадашка */
    #drawing-panel .dp-width-wrap {
      position: relative;
    }

    #drawing-panel .dp-width-menu {
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      margin-bottom: 8px;
      background: #fff;
      border-radius: 10px;
      padding: 6px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
      display: none;
      flex-direction: column;
      gap: 4px;
      min-width: 120px;
    }

    #drawing-panel .dp-width-menu.open {
      display: flex;
    }

    #drawing-panel .dp-width-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.1s;
      border: none;
      background: transparent;
      font-family: inherit;
      font-size: 12px;
      color: #1d1d1f;
      text-align: left;
      width: 100%;
    }

    #drawing-panel .dp-width-item:hover {
      background: rgba(0, 113, 227, 0.08);
    }

    #drawing-panel .dp-width-item.active {
      background: rgba(0, 113, 227, 0.15);
      color: #0071e3;
      font-weight: 600;
    }

    #drawing-panel .dp-width-preview {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }

    #drawing-panel .dp-width-line {
      background: currentColor;
      border-radius: 2px;
      width: 40px;
    }

    /* Тёмная тема */
    body.dark #drawing-panel {
      background: rgba(40, 40, 42, 0.95);
      color: #f5f5f7;
    }

    body.dark #drawing-panel .dp-btn {
      color: #f5f5f7;
    }

    body.dark #drawing-panel .dp-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark #drawing-panel .dp-divider {
      background: rgba(255, 255, 255, 0.1);
    }

    body.dark #drawing-panel .dp-close {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark #drawing-panel .dp-close:hover {
      background: #48484a;
    }

    body.dark #drawing-panel .dp-width-menu {
      background: #2c2c2e;
      color: #f5f5f7;
    }

    body.dark #drawing-panel .dp-width-item {
      color: #f5f5f7;
    }

    body.dark #drawing-panel .dp-width-item:hover {
      background: rgba(0, 113, 227, 0.2);
    }

    /* Академия */
    body.theme-academy #drawing-panel {
      background: rgba(26, 31, 46, 0.95);
      color: #e8e0c8;
    }

    body.theme-academy #drawing-panel .dp-btn,
    body.theme-academy #drawing-panel .dp-width-item {
      color: #e8e0c8;
    }

    body.theme-academy #drawing-panel .dp-divider {
      background: rgba(200, 170, 90, 0.2);
    }

    /* Неон */
    body.theme-neon #drawing-panel {
      background: rgba(10, 14, 39, 0.95);
      color: #e8f0ff;
    }

    body.theme-neon #drawing-panel .dp-btn,
    body.theme-neon #drawing-panel .dp-width-item {
      color: #e8f0ff;
    }

    body.theme-neon #drawing-panel .dp-divider {
      background: rgba(0, 240, 255, 0.2);
    }

    /* Слой для рисунков.
       SVG покрывает огромную область 100000×100000 px, сдвинут так,
       чтобы точка (0,0) мировых координат была в его центре.
       Тогда штрихи с любыми (в т.ч. отрицательными) координатами
       не обрезаются вьюпортом SVG. */
    #draw-svg {
      position: absolute;
      top: -50000px;
      left: -50000px;
      width: 100000px;
      height: 100000px;
      overflow: visible;
      pointer-events: none;
      z-index: 2;
    }

    #draw-svg.drawing-active {
      pointer-events: auto;
      cursor: crosshair;
    }

    /* Курсор-ластик — кружок вместо crosshair */
    #draw-svg.drawing-active.tool-eraser {
      cursor: none;
      /* свой курсор-кружок нарисуем в SVG */
    }

    /* Стираемые штрихи получают подсветку под курсором */
    #draw-svg path.eraser-hover,
    #draw-svg circle.eraser-hover,
    #draw-svg ellipse.eraser-hover {
      filter: drop-shadow(0 0 4px rgba(255, 59, 48, 0.9));
      stroke: #ff3b30 !important;
      opacity: 1 !important;
    }

    /* Частично стёртые штрихи — с точками, рисуются как ломаная */
    #draw-svg path.erased-parts {
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Индикатор ластика (кружок под курсором) */
    #eraser-cursor {
      position: absolute;
      pointer-events: none;
      z-index: 3;
      display: none;
      border: 2px solid rgba(255, 59, 48, 0.8);
      border-radius: 50%;
      background: rgba(255, 59, 48, 0.1);
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
      transform: translate(-50%, -50%);
    }

    #eraser-cursor.active {
      display: block;
    }

    /* В тёмной теме — чуть ярче */
    body.dark #eraser-cursor,
    body.theme-academy #eraser-cursor,
    body.theme-neon #eraser-cursor {
      border-color: rgba(255, 100, 90, 0.9);
      background: rgba(255, 100, 90, 0.12);
    }

    /* Адаптив */
    @media (max-width: 900px) {
      #drawing-panel {
        max-width: calc(100vw - 32px);
        overflow-x: auto;
      }

      body.drawing-mode.left-open #drawing-panel,
      body.drawing-mode.right-open #drawing-panel,
      body.drawing-mode.left-open.right-open #drawing-panel {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
      }
    }


    /* ───────── [STYLES: toolbar] Тулбар ───────── */
    #toolbar {
      position: fixed;
      top: calc(16px + env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 3px;
      background: rgba(255, 253, 249, 0.88);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 7px;
      border: 1px solid rgba(255,255,255,.75);
      border-radius: 17px;
      box-shadow: 0 12px 30px rgba(68, 49, 34, 0.13), 0 0 0 1px rgba(68,49,34,.06);
      z-index: 1000;
    }

    .btn {
      min-height: 34px;
      padding: 8px 11px;
      border: none;
      background: transparent;
      border-radius: 11px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: #1d1d1f;
      transition: background 0.15s;
      display: flex;
      align-items: center;
      gap: 6px;
      white-space: nowrap;
    }

    .btn:hover {
      background: rgba(202, 104, 76, 0.10);
    }

    .btn:disabled {
      opacity: 0.35;
      cursor: default;
    }

    .btn:disabled:hover {
      background: transparent;
    }

    .btn.active {
      background: #0071e3;
      color: #fff;
    }

    .btn.primary {
      background: #0071e3;
      color: #fff;
    }

    #search-box {
      position: fixed;
      top: calc(80px + env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 8px 14px;
      border-radius: 12px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
      z-index: 1000;
      display: none;
      align-items: center;
      gap: 8px;
      min-width: 340px;
    }

    #search-box.open {
      display: flex;
    }

    #search-box input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 14px;
      background: transparent;
      color: inherit;
    }

    #search-box .count {
      font-size: 12px;
      color: #86868b;
      white-space: nowrap;
    }

    #search-box .nav-btn {
      padding: 4px 8px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      font-size: 14px;
      color: inherit;
    }

    #search-box .nav-btn:hover {
      background: rgba(0, 0, 0, 0.08);
    }

    /* ───────── [STYLES: left-panel] Левая панель ───────── */
    #left-panel {
      position: fixed;
      top: calc(80px + env(safe-area-inset-top));
      left: calc(16px + env(safe-area-inset-left));
      bottom: calc(16px + env(safe-area-inset-bottom));
      width: 260px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
      padding: 0;
      overflow: hidden;
      z-index: 900;
      display: flex;
      flex-direction: column;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }

    #left-panel.closed {
      transform: translateX(-300px);
      opacity: 0;
      pointer-events: none;
    }

    #left-panel .lp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      flex-shrink: 0;
    }

    #left-panel .lp-title {
      font-size: 14px;
      font-weight: 600;
      color: #1d1d1f;
      letter-spacing: -0.01em;
    }

    #left-panel .lp-close {
      width: 24px;
      height: 24px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      color: #86868b;
      font-size: 18px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

    #left-panel .lp-close:hover {
      background: rgba(0, 0, 0, 0.06);
      color: #1d1d1f;
    }

    #left-panel .lp-body {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }

    #left-panel .lp-empty {
      padding: 24px 16px;
      text-align: center;
      font-size: 13px;
      color: #86868b;
      line-height: 1.5;
    }

    body.dark #left-panel {
      background: rgba(40, 40, 42, 0.95);
      color: #f5f5f7;
    }

    body.dark #left-panel .lp-header {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    body.dark #left-panel .lp-title {
      color: #f5f5f7;
    }

    body.dark #left-panel .lp-close:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #f5f5f7;
    }


    /* ─── Секции аккордеона ─── */
    .lp-section {
      border-radius: 10px;
      margin-bottom: 4px;
      overflow: hidden;
    }

    .lp-section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      cursor: pointer;
      border-radius: 8px;
      transition: background 0.15s;
      user-select: none;
    }

    .lp-section-header:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    .lp-section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #1d1d1f;
    }

    .lp-section-arrow {
      font-size: 10px;
      color: #86868b;
      transition: transform 0.2s;
      display: inline-block;
    }

    .lp-section.open .lp-section-arrow {
      transform: rotate(90deg);
    }

    .lp-section-badge {
      font-size: 10px;
      font-weight: 600;
      background: #0071e3;
      color: #fff;
      padding: 2px 7px;
      border-radius: 20px;
      min-width: 18px;
      text-align: center;
    }

    .lp-section-badge.warn {
      background: #ff9500;
    }

    .lp-section-content {
      display: none;
      padding: 6px 10px 12px;
      font-size: 13px;
    }

    .lp-section.open .lp-section-content {
      display: block;
    }

    .lp-placeholder {
      font-size: 12px;
      color: #86868b;
      padding: 8px 4px;
      line-height: 1.4;
    }

    .lp-tag-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 4px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.1s;
    }

    .lp-tag-row:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    .lp-tag-row input[type="checkbox"] {
      cursor: pointer;
      accent-color: #0071e3;
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .lp-tag-row .lp-tag-name {
      flex: 1;
      font-size: 13px;
      color: #1d1d1f;
    }

    .lp-tag-row .lp-tag-count {
      font-size: 11px;
      color: #86868b;
      font-weight: 500;
    }

    .lp-tag-row.no-tag {
      opacity: 0.7;
      font-style: italic;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      margin-top: 6px;
      padding-top: 10px;
    }

    .lp-actions {
      display: flex;
      gap: 6px;
      margin-top: 10px;
    }

    body.dark .lp-btn:hover {
      background: #48484a;
    }


    /* ─── Шифрование ─── */
    .enc-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      border-radius: 8px;
      font-size: 13px;
      margin-bottom: 10px;
    }

    .enc-status.locked {
      background: rgba(255, 149, 0, 0.12);
      color: #b86b00;
    }

    .enc-status.unlocked {
      background: rgba(0, 0, 0, 0.04);
      color: #86868b;
    }

    body.dark .enc-status.locked {
      background: rgba(255, 149, 0, 0.18);
      color: #ffb74d;
    }

    body.dark .enc-status.unlocked {
      background: rgba(255, 255, 255, 0.06);
      color: #a1a1a6;
    }

    body.theme-academy .enc-status.locked {
      background: rgba(255, 149, 0, 0.18);
      color: #ffb74d;
    }

    body.theme-academy .enc-status.unlocked {
      background: rgba(232, 224, 200, 0.06);
      color: #a09475;
    }

    body.theme-neon .enc-status.locked {
      background: rgba(255, 149, 0, 0.18);
      color: #ffb74d;
    }

    body.theme-neon .enc-status.unlocked {
      background: rgba(0, 240, 255, 0.08);
      color: #8a9bc7;
    }

    /* Модалка пароля — стили уже есть в [STYLES: modals] */
    #password-modal .tpl-name-input {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      letter-spacing: 0.05em;
    }



    /* ─── История версий ─── */
    .autosave-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 10px;
      padding: 6px 4px;
    }

    .autosave-toggle {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px;
      color: #1d1d1f;
      cursor: pointer;
      flex: 1;
    }

    .autosave-toggle input[type="checkbox"] {
      cursor: pointer;
      accent-color: #0071e3;
      width: 14px;
      height: 14px;
    }

    .autosave-select {
      padding: 4px 6px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 11px;
      background: #fff;
      color: #1d1d1f;
      cursor: pointer;
      outline: none;
      font-family: inherit;
    }

    .autosave-select:focus {
      border-color: #0071e3;
    }

    .history-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 6px;
      border-radius: 8px;
      transition: background 0.15s;
      cursor: default;
    }

    .history-item:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    .history-item .hi-info {
      flex: 1;
      min-width: 0;
    }

    .history-item .hi-time {
      font-size: 12px;
      font-weight: 600;
      color: #1d1d1f;
      margin-bottom: 2px;
    }

    .history-item .hi-stats {
      font-size: 10px;
      color: #86868b;
    }

    .history-item .hi-btn {
      width: 26px;
      height: 26px;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      flex-shrink: 0;
      padding: 0;
    }

    .history-item .hi-btn:hover {
      background: rgba(0, 0, 0, 0.08);
    }

    .history-item .hi-btn.danger:hover {
      background: rgba(255, 59, 48, 0.12);
      color: #ff3b30;
    }

    .history-item .hi-auto {
      font-size: 9px;
      font-weight: 600;
      padding: 1px 5px;
      border-radius: 4px;
      background: rgba(0, 113, 227, 0.15);
      color: #0071e3;
      margin-left: 4px;
      text-transform: uppercase;
    }

    .history-empty {
      font-size: 11px;
      color: #86868b;
      padding: 8px 4px;
      text-align: center;
      line-height: 1.4;
    }

    body.dark .autosave-toggle {
      color: #f5f5f7;
    }

    body.dark .autosave-select {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.dark .history-item:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark .history-item .hi-time {
      color: #f5f5f7;
    }

    body.dark .history-item .hi-btn {
      color: #f5f5f7 !important;
    }

    body.dark .history-item .hi-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    body.dark .history-item .hi-btn.danger:hover {
      background: rgba(255, 59, 48, 0.2);
      color: #ff6b5e;
    }

    /* 🎓 Тёмная академия */
    body.theme-academy .autosave-toggle {
      color: #e8e0c8;
    }

    body.theme-academy .autosave-select {
      background: #232a3d;
      border-color: #3a4560;
      color: #e8e0c8;
    }

    body.theme-academy .history-item:hover {
      background: rgba(232, 224, 200, 0.08);
    }

    body.theme-academy .history-item .hi-time {
      color: #e8e0c8;
    }

    body.theme-academy .history-item .hi-stats {
      color: #a09475;
    }

    body.theme-academy .history-item .hi-btn {
      color: #e8e0c8 !important;
    }

    body.theme-academy .history-item .hi-btn:hover {
      background: rgba(232, 224, 200, 0.12);
    }

    body.theme-academy .history-item .hi-btn.danger:hover {
      background: rgba(255, 59, 48, 0.25);
      color: #ff6b5e;
    }

    body.theme-academy .history-empty {
      color: #a09475;
    }

    body.theme-academy .panel-btn {
      background: #232a3d;
      color: #e8e0c8;
    }

    body.theme-academy .panel-btn:hover {
      background: #2d3651;
    }

    body.theme-academy .panel-btn.danger {
      color: #ff6b5e;
    }

    /* 🌊 Неон */
    body.theme-neon .autosave-toggle {
      color: #e8f0ff;
    }

    body.theme-neon .autosave-select {
      background: #1a1f45;
      border-color: #2d3a6a;
      color: #e8f0ff;
    }

    body.theme-neon .history-item:hover {
      background: rgba(0, 240, 255, 0.08);
    }

    body.theme-neon .history-item .hi-time {
      color: #e8f0ff;
    }

    body.theme-neon .history-item .hi-stats {
      color: #8a9bc7;
    }

    body.theme-neon .history-item .hi-btn {
      color: #e8f0ff !important;
    }

    body.theme-neon .history-item .hi-btn:hover {
      background: rgba(0, 240, 255, 0.15);
    }

    body.theme-neon .history-item .hi-btn.danger:hover {
      background: rgba(255, 59, 48, 0.25);
      color: #ff6b5e;
    }

    body.theme-neon .history-empty {
      color: #8a9bc7;
    }

    body.theme-neon .panel-btn {
      background: #1a1f45;
      color: #e8f0ff;
    }

    body.theme-neon .panel-btn:hover {
      background: #232a5c;
    }

    body.theme-neon .panel-btn.danger {
      color: #ff6b5e;
    }


    /* ─── Фон карты ─── */
    .lp-bg-preview {
      width: 100%;
      height: 80px;
      border-radius: 8px;
      background-color: rgba(0, 0, 0, 0.04);
      background-size: cover;
      background-position: center;
      margin-bottom: 10px;
      border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .lp-bg-label {
      font-size: 11px;
      color: #86868b;
      margin: 10px 0 6px;
      font-weight: 500;
    }

    .lp-bg-slider {
      width: 100%;
      accent-color: #0071e3;
    }

    .lp-bg-size-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }

    .lp-bg-size-btn {
      padding: 8px 6px;
      background: #f5f5f7;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      color: #1d1d1f;
      transition: all 0.1s;
    }

    .lp-bg-size-btn:hover {
      background: #e8e8ed;
    }

    .lp-bg-size-btn.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
      color: #0071e3;
    }

    body.dark .lp-bg-preview {
      background-color: rgba(255, 255, 255, 0.06);
      border-color: rgba(255, 255, 255, 0.08);
    }

    body.dark .lp-bg-size-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .lp-bg-size-btn:hover {
      background: #48484a;
    }

    body.theme-academy .lp-bg-size-btn {
      background: #232a3d;
      color: #e8e0c8;
    }

    body.theme-academy .lp-bg-size-btn:hover {
      background: #2d3651;
    }

    body.theme-neon .lp-bg-size-btn {
      background: #1a1f45;
      color: #e8f0ff;
    }

    body.theme-neon .lp-bg-size-btn:hover {
      background: #232a5c;
    }



    /* Страховка: иконки истории всегда видимы в тёмных темах */
    body.dark .history-item .hi-btn,
    body.theme-academy .history-item .hi-btn,
    body.theme-neon .history-item .hi-btn {
      color: inherit !important;
    }

    body.dark .history-item .hi-btn {
      color: #f5f5f7 !important;
    }

    body.theme-academy .history-item .hi-btn {
      color: #e8e0c8 !important;
    }

    body.theme-neon .history-item .hi-btn {
      color: #e8f0ff !important;
    }

    /* Статистика карты */
    .stat-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 4px;
      font-size: 12px;
      border-radius: 4px;
    }

    .stat-row .stat-label {
      color: #86868b;
    }

    .stat-row .stat-value {
      font-weight: 600;
      color: #1d1d1f;
    }

    .stat-row .stat-value.warn {
      color: #ff3b30;
    }

    .stat-divider {
      height: 1px;
      background: rgba(0, 0, 0, 0.06);
      margin: 8px 4px;
    }

    .stat-section-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 4px 4px 2px;
    }

    .stat-tag-row {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.1s;
      font-size: 12px;
    }

    .stat-tag-row:hover {
      background: rgba(0, 113, 227, 0.08);
    }

    .stat-tag-row .stat-tag-name {
      flex: 1;
      color: #1d1d1f;
    }

    .stat-tag-row .stat-tag-count {
      color: #86868b;
      font-weight: 500;
      font-size: 11px;
    }

    body.dark .stat-row .stat-label {
      color: #a1a1a6;
    }

    body.dark .stat-row .stat-value {
      color: #f5f5f7;
    }

    body.dark .stat-divider {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark .stat-section-title {
      color: #a1a1a6;
    }

    body.dark .stat-tag-row:hover {
      background: rgba(0, 113, 227, 0.2);
    }

    body.dark .stat-tag-row .stat-tag-name {
      color: #f5f5f7;
    }

    body.dark .stat-tag-row .stat-tag-count {
      color: #a1a1a6;
    }

    .lp-btn {
      flex: 1;
      padding: 6px 10px;
      border: none;
      background: #f5f5f7;
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      color: #1d1d1f;
      transition: background 0.15s;
    }

    .lp-btn:hover {
      background: #e8e8ed;
    }

    body.dark .lp-section-header:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark .lp-section-title {
      color: #f5f5f7;
    }

    body.dark .lp-tag-row:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark .lp-tag-row .lp-tag-name {
      color: #f5f5f7;
    }

    body.dark .lp-tag-row.no-tag {
      border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.dark .lp-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .lp-btn:hover {
      background: #48484a;
    }

    /* ─── Группы тегов в левой панели ─── */
    .lp-tag-group-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 6px 6px;
      margin-top: 4px;
      border-radius: 6px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
      font-size: 12px;
      font-weight: 600;
      color: #1d1d1f;
      opacity: 0.85;
    }

    .lp-tag-group-header:hover {
      background: rgba(0, 0, 0, 0.05);
      opacity: 1;
    }

    .lp-tag-group-arrow {
      display: inline-block;
      font-size: 9px;
      color: #86868b;
      transition: transform 0.2s;
      width: 12px;
      text-align: center;
      flex-shrink: 0;
    }

    .lp-tag-group-header.collapsed .lp-tag-group-arrow {
      transform: rotate(-90deg);
    }

    .lp-tag-group-icon {
      font-size: 13px;
      flex-shrink: 0;
    }

    .lp-tag-group-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .lp-tag-group-count {
      font-size: 10px;
      font-weight: 500;
      color: #86868b;
      background: rgba(0, 0, 0, 0.06);
      padding: 1px 6px;
      border-radius: 8px;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }

    .lp-tag-group-body {
      padding-left: 4px;
    }

    /* Точка рядом с тегом */
    .lp-tag-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
    }

    /* Теги внутри группы — с небольшим отступом */
    .lp-tag-row.in-group {
      padding-left: 14px;
    }

    /* Тёмные темы */
    body.dark .lp-tag-group-header,
    body.theme-academy .lp-tag-group-header {
      color: #f5f5f7;
    }

    body.dark .lp-tag-group-header:hover,
    body.theme-academy .lp-tag-group-header:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark .lp-tag-group-count,
    body.theme-academy .lp-tag-group-count {
      background: rgba(255, 255, 255, 0.1);
      color: #a1a1a6;
    }

    body.theme-neon .lp-tag-group-header {
      color: #e8f0ff;
    }

    body.theme-neon .lp-tag-group-header:hover {
      background: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .lp-tag-group-count {
      background: rgba(0, 240, 255, 0.12);
      color: #8a9bc7;
    }

    body.dark .lp-tag-dot,
    body.theme-academy .lp-tag-dot,
    body.theme-neon .lp-tag-dot {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    }

    /* ─── Кнопка «+ Группа» (primary-стиль) ─── */
    .lp-btn.lp-btn-primary {
      background: #0071e3;
      color: #fff;
      font-weight: 600;
    }

    .lp-btn.lp-btn-primary:hover {
      background: #0058b0;
    }

    body.dark .lp-btn.lp-btn-primary,
    body.theme-academy .lp-btn.lp-btn-primary {
      background: #0071e3;
      color: #fff;
    }

    body.dark .lp-btn.lp-btn-primary:hover,
    body.theme-academy .lp-btn.lp-btn-primary:hover {
      background: #0058b0;
    }

    body.theme-neon .lp-btn.lp-btn-primary {
      background: #00a0e3;
      color: #fff;
    }

    body.theme-neon .lp-btn.lp-btn-primary:hover {
      background: #0080c3;
    }

    /* ─── Модалка создания/редактирования группы ─── */
    #tag-group-modal {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: 5500;
      /* выше модалок контента (5000), ниже тег-меню (9600) */
      display: none;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }

    #tag-group-modal.open {
      display: flex;
    }

    #tag-group-modal .tgm-box {
      background: #fff;
      border-radius: 16px;
      padding: 24px;
      width: 90vw;
      max-width: 420px;
      box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    }

    body.dark #tag-group-modal .tgm-box,
    body.theme-academy #tag-group-modal .tgm-box {
      background: #2c2c2e;
      color: #f5f5f7;
    }

    body.theme-neon #tag-group-modal .tgm-box {
      background: #0f1535;
      color: #e8f0ff;
    }

    #tag-group-modal h2 {
      font-size: 18px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    #tag-group-modal .tgm-sub {
      font-size: 13px;
      color: #86868b;
      margin-bottom: 18px;
    }

    #tag-group-modal .tgm-label {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin: 12px 0 6px;
      display: block;
    }

    #tag-group-modal .tgm-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 14px;
      outline: none;
      background: #fff;
      color: inherit;
      font-family: inherit;
    }

    #tag-group-modal .tgm-input:focus {
      border-color: #0071e3;
    }

    body.dark #tag-group-modal .tgm-input,
    body.theme-academy #tag-group-modal .tgm-input {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.theme-neon #tag-group-modal .tgm-input {
      background: #1a1f45;
      border-color: #2d3a6a;
      color: #e8f0ff;
    }

    /* Сетка иконок */
    #tag-group-modal .tgm-icon-grid {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
      gap: 6px;
    }

    #tag-group-modal .tgm-icon-btn {
      aspect-ratio: 1;
      border: 2px solid transparent;
      border-radius: 8px;
      background: #f5f5f7;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s;
      padding: 0;
      font-family: inherit;
    }

    #tag-group-modal .tgm-icon-btn:hover {
      background: #e8e8ed;
    }

    #tag-group-modal .tgm-icon-btn.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.1);
    }

    body.dark #tag-group-modal .tgm-icon-btn,
    body.theme-academy #tag-group-modal .tgm-icon-btn {
      background: #3a3a3c;
    }

    body.dark #tag-group-modal .tgm-icon-btn:hover,
    body.theme-academy #tag-group-modal .tgm-icon-btn:hover {
      background: #48484a;
    }

    body.theme-neon #tag-group-modal .tgm-icon-btn {
      background: #1a1f45;
    }

    /* Сетка цветов */
    #tag-group-modal .tgm-color-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 6px;
    }

    #tag-group-modal .tgm-color-btn {
      aspect-ratio: 1;
      border: 2px solid transparent;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.1s;
      padding: 0;
    }

    #tag-group-modal .tgm-color-btn:hover {
      transform: scale(1.15);
    }

    #tag-group-modal .tgm-color-btn.active {
      border-color: #1d1d1f;
      box-shadow: 0 0 0 2px #fff inset;
    }

    body.dark #tag-group-modal .tgm-color-btn.active,
    body.theme-academy #tag-group-modal .tgm-color-btn.active {
      border-color: #f5f5f7;
    }

    #tag-group-modal .tgm-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      margin-top: 20px;
    }

    #tag-group-modal .tgm-actions button {
      padding: 10px 20px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 14px;
      font-weight: 500;
      font-family: inherit;
    }

    #tag-group-modal .tgm-cancel {
      background: #f5f5f7;
      color: #1d1d1f;
    }

    body.dark #tag-group-modal .tgm-cancel,
    body.theme-academy #tag-group-modal .tgm-cancel {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.theme-neon #tag-group-modal .tgm-cancel {
      background: #1a1f45;
      color: #e8f0ff;
    }

    #tag-group-modal .tgm-create {
      background: #0071e3;
      color: #fff;
    }

    #tag-group-modal .tgm-create:hover {
      background: #0058b0;
    }



    /* Индикатор активного фильтра в шапке панели */
    #left-panel.has-active-filter .lp-title::after {
      content: '';
      display: inline-block;
      width: 8px;
      height: 8px;
      background: #ff9500;
      border-radius: 50%;
      margin-left: 8px;
      vertical-align: middle;
      box-shadow: 0 0 0 2px rgba(255, 149, 0, 0.25);
    }

    /* ─── Блок «💾 Хранилище» в панели «О приложении» ─── */
    .storage-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }

    .storage-status {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 12px;
      margin-bottom: 8px;
      line-height: 1.35;
    }

    .storage-status.ok {
      background: rgba(52, 199, 89, 0.12);
      color: #1a7a35;
    }

    .storage-status.warn {
      background: rgba(255, 149, 0, 0.12);
      color: #b86b00;
    }

    .storage-label {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      color: #86868b;
      margin-bottom: 4px;
      font-weight: 500;
    }

    .storage-bar {
      width: 100%;
      height: 8px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 4px;
      overflow: hidden;
      margin-bottom: 6px;
    }

    .storage-bar-fill {
      height: 100%;
      background: #34c759;
      border-radius: 4px;
      transition: width 0.3s ease, background 0.3s ease;
    }

    .storage-bar-fill.warn {
      background: #ff9500;
    }

    .storage-bar-fill.danger {
      background: #ff3b30;
    }

    .storage-percent {
      font-size: 11px;
      color: #86868b;
      text-align: right;
      margin-bottom: 4px;
    }

    .storage-info {
      font-size: 11px;
      color: #86868b;
      line-height: 1.45;
      padding: 6px 8px;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.03);
    }

    .storage-info.warn {
      color: #b86b00;
      background: rgba(255, 149, 0, 0.1);
    }

    .storage-last {
      font-size: 10px;
      color: #86868b;
      text-align: right;
      margin-top: 6px;
      opacity: 0.75;
    }

    /* ─── Блок «⚙️ Настройки поведения» ─── */
    .settings-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 6px;
    }

    .settings-desc {
      font-size: 11px;
      color: #86868b;
      line-height: 1.4;
      margin-bottom: 10px;
      opacity: 0.85;
    }

    .settings-empty {
      font-size: 11px;
      color: #86868b;
      text-align: center;
      padding: 10px 4px;
      font-style: italic;
      opacity: 0.75;
    }

    .settings-list {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }

    .settings-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 8px;
      transition: background 0.15s;
    }

    .settings-item:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    .settings-item-info {
      flex: 1;
      min-width: 0;
    }

    .settings-item-label {
      font-size: 12px;
      font-weight: 600;
      color: #1d1d1f;
      margin-bottom: 2px;
      line-height: 1.3;
    }

    .settings-item-value {
      font-size: 11px;
      color: #86868b;
      line-height: 1.3;
    }

    .settings-item-reset {
      width: 26px;
      height: 26px;
      border: none;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      transition: background 0.15s, color 0.15s;
      flex-shrink: 0;
      font-family: inherit;
    }

    .settings-item-reset:hover {
      background: rgba(255, 149, 0, 0.15);
      color: #ff9500;
    }

    /* Настройки выбранной связи */
    .edge-endpoint-row,
    .edge-line-style-modes {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 7px;
      margin-top: 8px;
    }
    .edge-endpoint-btn,
    .edge-line-style-btn {
      min-height: 48px;
      border: 1px solid rgba(80, 70, 60, .16);
      border-radius: 10px;
      background: rgba(255, 255, 255, .72);
      color: inherit;
      cursor: pointer;
      font-family: inherit;
      font-size: 11px;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      transition: border-color .15s, background .15s, box-shadow .15s;
    }
    .edge-endpoint-btn:hover,
    .edge-line-style-btn:hover { border-color: #0071e3; }
    .edge-endpoint-btn.active,
    .edge-line-style-btn.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, .08);
      box-shadow: 0 0 0 2px rgba(0, 113, 227, .12);
    }
    .edge-endpoint-preview {
      position: relative;
      display: block;
      width: 42px;
      height: 14px;
      color: currentColor;
      flex: 0 0 auto;
    }
    .edge-endpoint-preview::before {
      content: '';
      position: absolute;
      left: 2px;
      right: 2px;
      top: 6px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
    }
    .edge-endpoint-preview.arrow::after {
      content: '';
      position: absolute;
      right: 0;
      top: 2px;
      border-left: 9px solid currentColor;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
    .edge-endpoint-preview.line::after {
      content: '';
      position: absolute;
      right: 0;
      top: 4px;
      width: 6px;
      height: 6px;
      border: 2px solid currentColor;
      border-radius: 50%;
      background: transparent;
    }
    .edge-line-preview {
      position: relative;
      display: block;
      width: 42px;
      height: 18px;
      flex: 0 0 auto;
      color: currentColor;
    }
    .edge-line-preview::before {
      content: '';
      position: absolute;
      left: 2px;
      right: 2px;
      top: 8px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
    }
    .edge-line-preview.curved::before {
      height: 14px;
      top: 1px;
      border-radius: 50%;
      border: 2px solid currentColor;
      border-color: currentColor transparent transparent transparent;
      background: transparent;
      transform: rotate(3deg);
    }
    .edge-line-style-scope {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-top: 10px;
      padding-top: 9px;
      border-top: 1px solid rgba(80, 70, 60, .12);
      font-size: 11px;
      color: #716960;
    }
    .edge-line-style-scope label {
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
    }
    .edge-line-style-scope input { accent-color: #0071e3; }
    body.dark .edge-endpoint-btn,
    body.dark .edge-line-style-btn,
    body.theme-midnight .edge-endpoint-btn,
    body.theme-midnight .edge-line-style-btn {
      background: rgba(255,255,255,.07);
      border-color: rgba(255,255,255,.16);
      color: #edf2f5;
    }
    body.dark .edge-line-style-scope,
    body.theme-midnight .edge-line-style-scope { color: #cbd5dc; border-color: rgba(255,255,255,.14); }

    /* Тёмная тема */
    body.dark .settings-item {
      background: rgba(255, 255, 255, 0.05);
    }

    body.dark .settings-item:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    body.dark .settings-item-label {
      color: #f5f5f7;
    }

    body.dark .settings-item-value {
      color: #a1a1a6;
    }

    body.dark .settings-item-reset {
      background: rgba(255, 255, 255, 0.1);
      color: #f5f5f7;
    }

    body.dark .settings-item-reset:hover {
      background: rgba(255, 149, 0, 0.25);
      color: #ffb74d;
    }

    /* 🎓 Академия */
    body.theme-academy .settings-item {
      background: rgba(232, 224, 200, 0.06);
    }

    body.theme-academy .settings-item:hover {
      background: rgba(232, 224, 200, 0.12);
    }

    body.theme-academy .settings-item-label {
      color: #e8e0c8;
    }

    body.theme-academy .settings-item-value {
      color: #a09475;
    }

    body.theme-academy .settings-item-reset {
      background: rgba(232, 224, 200, 0.1);
      color: #e8e0c8;
    }

    /* 🌊 Неон */
    body.theme-neon .settings-item {
      background: rgba(0, 240, 255, 0.05);
    }

    body.theme-neon .settings-item:hover {
      background: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .settings-item-label {
      color: #e8f0ff;
    }

    body.theme-neon .settings-item-value {
      color: #8a9bc7;
    }

    body.theme-neon .settings-item-reset {
      background: rgba(0, 240, 255, 0.1);
      color: #e8f0ff;
    }

    /* Тёмная тема */
    body.dark .storage-status.ok {
      background: rgba(52, 199, 89, 0.18);
      color: #5dd67a;
    }

    body.dark .storage-status.warn {
      background: rgba(255, 149, 0, 0.18);
      color: #ffb74d;
    }

    body.dark .storage-bar {
      background: rgba(255, 255, 255, 0.1);
    }

    body.dark .storage-info {
      background: rgba(255, 255, 255, 0.05);
    }

    body.dark .storage-info.warn {
      color: #ffb74d;
      background: rgba(255, 149, 0, 0.15);
    }

    /* 🎓 Академия */
    body.theme-academy .storage-status.ok {
      background: rgba(52, 199, 89, 0.18);
      color: #5dd67a;
    }

    body.theme-academy .storage-status.warn {
      background: rgba(255, 149, 0, 0.18);
      color: #ffb74d;
    }

    body.theme-academy .storage-bar {
      background: rgba(200, 170, 90, 0.15);
    }

    body.theme-academy .storage-info {
      background: rgba(232, 224, 200, 0.06);
      color: #a09475;
    }

    /* 🌊 Неон */
    body.theme-neon .storage-status.ok {
      background: rgba(52, 199, 89, 0.18);
      color: #5dd67a;
    }

    body.theme-neon .storage-status.warn {
      background: rgba(255, 149, 0, 0.18);
      color: #ffb74d;
    }

    body.theme-neon .storage-bar {
      background: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .storage-info {
      background: rgba(0, 240, 255, 0.06);
      color: #8a9bc7;
    }


    /* ───────── [STYLES: side-panel] Правая панель ───────── */
    #side-panel {
      position: fixed;
      top: calc(80px + env(safe-area-inset-top));
      right: calc(16px + env(safe-area-inset-right));
      bottom: calc(16px + env(safe-area-inset-bottom));
      width: 280px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
      padding: 20px;
      overflow-y: auto;
      z-index: 900;
      transform: translateX(320px);
      opacity: 0;
      transition: transform 0.2s, opacity 0.2s;
      pointer-events: none;
    }

    #side-panel.open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }

    #side-panel h3 {
      font-size: 12px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #86868b;
      margin: 16px 0 8px;
    }

    #side-panel h3:first-child {
      margin-top: 0;
    }

    /* ─── Сворачиваемые группы правой панели ─── */
    .sp-group {
      border-radius: 10px;
      background: rgba(0, 0, 0, 0.02);
      border: 1px solid rgba(0, 0, 0, 0.04);
      margin-bottom: 8px;
      overflow: hidden;
      transition: background 0.15s;
    }

    .sp-group.open {
      background: transparent;
      border-color: transparent;
    }

    .sp-group-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
      font-size: 13px;
      font-weight: 600;
      color: #1d1d1f;
    }

    .sp-group-header:hover {
      background: rgba(0, 0, 0, 0.04);
    }

    .sp-group-arrow {
      font-size: 9px;
      color: #86868b;
      transition: transform 0.2s;
      display: inline-block;
      flex-shrink: 0;
    }

    .sp-group.open .sp-group-arrow {
      transform: rotate(90deg);
    }

    .sp-group-icon {
      font-size: 14px;
      flex-shrink: 0;
    }

    .sp-group-title {
      flex: 1;
    }

    .sp-group-content {
      display: none;
      padding: 4px 12px 12px;
    }

    .sp-group.open .sp-group-content {
      display: block;
    }

    /* Подсекции внутри группы */
    .sp-subsection {
      padding: 8px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }

    .sp-subsection:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .sp-subsection-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 6px;
    }

    /* Тёмная тема */
    body.dark .sp-group {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.06);
    }

    body.dark .sp-group.open {
      background: transparent;
      border-color: transparent;
    }

    body.dark .sp-group-header {
      color: #f5f5f7;
    }

    body.dark .sp-group-header:hover {
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark .sp-subsection {
      border-bottom-color: rgba(255, 255, 255, 0.06);
    }

    /* 🎓 Академия */
    body.theme-academy .sp-group {
      background: rgba(232, 224, 200, 0.04);
      border-color: rgba(232, 224, 200, 0.08);
    }

    body.theme-academy .sp-group-header {
      color: #e8e0c8;
    }

    body.theme-academy .sp-subsection {
      border-bottom-color: rgba(232, 224, 200, 0.08);
    }

    body.theme-academy .sp-subsection-title {
      color: #a09475;
    }

    /* 🌊 Неон */
    body.theme-neon .sp-group {
      background: rgba(0, 240, 255, 0.04);
      border-color: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .sp-group-header {
      color: #e8f0ff;
    }

    body.theme-neon .sp-subsection {
      border-bottom-color: rgba(0, 240, 255, 0.08);
    }

    body.theme-neon .sp-subsection-title {
      color: #8a9bc7;
    }

    #side-panel .count {
      font-size: 12px;
      color: #86868b;
      margin-bottom: 8px;
    }

    .content-field {
      width: 100%;
      padding: 8px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fff;
      color: inherit;
      font-family: inherit;
      resize: vertical;
      min-height: 34px;
      transition: border-color 0.15s;
    }

    .content-field:focus {
      border-color: #0071e3;
    }

    .content-field.title-field {
      font-weight: 600;
      margin-bottom: 6px;
    }

    .content-field.body-field {
      min-height: 90px;
    }

    body.dark .content-field {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    .swatches {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
    }

    .swatch {
      aspect-ratio: 1;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.1s;
    }

    .swatch:hover {
      transform: scale(1.1);
    }

    .swatch.active {
      border-color: #0071e3;
    }

    .swatches.recent {
      margin-bottom: 8px;
    }

    .swatches.recent .swatch {
      width: 100%;
    }

    .shape-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    /* Быстрые стили и аккуратные декоративные настройки ноды */
    .node-style-presets {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }

    .node-style-preset,
    .node-pattern-btn {
      border: 1px solid rgba(80, 70, 60, 0.12);
      background: rgba(255, 255, 255, 0.72);
      color: inherit;
      border-radius: 10px;
      font-family: inherit;
      cursor: pointer;
      transition: border-color .15s ease, background .15s ease, transform .15s ease;
    }

    .node-style-preset {
      min-height: 62px;
      padding: 7px 4px 6px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-width: 0;
      font-size: 11px;
      font-weight: 600;
      text-align: center;
    }
    .node-style-preset > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .node-style-preset:hover,
    .node-pattern-btn:hover {
      border-color: rgba(205, 102, 71, 0.5);
      background: rgba(205, 102, 71, 0.08);
      transform: translateY(-1px);
    }

    .node-style-preset-preview {
      width: 28px;
      height: 28px;
      flex: 0 0 28px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      font-size: 15px;
      box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
    }

    .node-style-preset[data-preset="soft"] .node-style-preset-preview { border-radius: 12px; }
    .node-style-preset[data-preset="business"] .node-style-preset-preview { border-radius: 5px; box-shadow: inset 0 0 0 2px rgba(38,56,65,.16); }
    .node-style-preset[data-preset="botanical"] .node-style-preset-preview { border-radius: 10px 4px 10px 4px; }
    .node-style-preset[data-preset="creative"] .node-style-preset-preview { border-radius: 8px; transform: rotate(-4deg); }
    .node-style-preset[data-preset="business"] .node-style-preset-preview { background-image: linear-gradient(rgba(38,56,65,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(38,56,65,.14) 1px, transparent 1px); background-size: 8px 8px; }
    .node-style-preset[data-preset="botanical"] .node-style-preset-preview { background-image: radial-gradient(rgba(41,67,46,.18) 1.2px, transparent 1.8px); background-size: 7px 7px; }
    .node-style-preset[data-preset="creative"] .node-style-preset-preview { background-image: radial-gradient(rgba(67,36,81,.18) 1.4px, transparent 2px); background-size: 8px 8px; }

    .node-style-advanced {
      margin: 7px 0 1px;
      border: 1px solid rgba(80, 70, 60, 0.12);
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255, 255, 255, 0.34);
    }

    .node-style-advanced > summary {
      padding: 8px 10px;
      cursor: pointer;
      list-style: none;
      font-size: 11px;
      font-weight: 600;
      color: #6f675f;
    }

    .node-style-advanced > summary::-webkit-details-marker { display: none; }
    .node-style-advanced > summary::before { content: '＋'; margin-right: 5px; color: #cd6848; }
    .node-style-advanced[open] > summary::before { content: '−'; }

    .node-style-advanced-body {
      padding: 0 9px 9px;
      border-top: 1px solid rgba(80, 70, 60, 0.08);
    }

    .node-pattern-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 5px;
      margin-bottom: 8px;
    }

    .node-pattern-btn {
      min-height: 43px;
      padding: 4px 2px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      font-size: 16px;
    }

    .node-pattern-btn > span:first-child {
      width: 28px;
      height: 18px;
      display: block;
      border: 1px solid rgba(80,70,60,.18);
      border-radius: 5px;
      font-size: 0;
      background-color: rgba(255,255,255,.55);
    }
    .node-pattern-btn[data-pattern="none"] > span:first-child { background: transparent; border: 1px solid #6f675f; border-radius: 50%; width: 15px; height: 15px; }
    .node-pattern-btn[data-pattern="brush"] > span:first-child { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18' viewBox='0 0 30 18'%3E%3Cpath d='M-2 14 C6 2 12 18 18 7 S27 2 32 12' fill='none' stroke='%235d554e' stroke-opacity='.6' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 30px 18px; }
    .node-pattern-btn[data-pattern="leaves"] > span:first-child { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18' viewBox='0 0 30 18'%3E%3Cpath d='M4 15 C7 8 11 4 16 3 C15 10 11 14 4 15Z' fill='%235d554e' fill-opacity='.28'/%3E%3Cpath d='M4 15 C8 11 12 7 16 3' fill='none' stroke='%235d554e' stroke-width='1'/%3E%3Cpath d='M18 15 C21 9 24 6 29 5 C28 11 24 14 18 15Z' fill='%235d554e' fill-opacity='.45'/%3E%3C/svg%3E"); background-size: 30px 18px; }
    .node-pattern-btn[data-pattern="grid"] > span:first-child { background-image: linear-gradient(#5d554e 1px, transparent 1px), linear-gradient(90deg, #5d554e 1px, transparent 1px); background-size: 7px 7px; }
    .node-pattern-btn[data-pattern="diagonal"] > span:first-child { background-image: repeating-linear-gradient(135deg, #5d554e 0 1px, transparent 1px 6px); }
    .node-pattern-btn[data-pattern="waves"] > span:first-child { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='16' viewBox='0 0 30 16'%3E%3Cpath d='M0 8 C5 1 10 1 15 8 S25 15 30 8' fill='none' stroke='%235d554e' stroke-width='1.5'/%3E%3C/svg%3E"); background-size: 30px 16px; }
    .node-pattern-btn[data-pattern="confetti"] > span:first-child { background-image: radial-gradient(circle at 20% 30%, #5d554e 0 1.5px, transparent 2px), radial-gradient(circle at 70% 70%, #5d554e 0 1.5px, transparent 2px), radial-gradient(circle at 85% 25%, #5d554e 0 1px, transparent 1.5px); }
    .node-pattern-btn[data-pattern="dots"] > span:first-child { background-image: radial-gradient(#5d554e 1px, transparent 1.5px); background-size: 8px 8px; }
    .node-pattern-btn[data-pattern="paper"] > span:first-child { background-image: repeating-linear-gradient(7deg, transparent 0 4px, rgba(93,85,78,.38) 4px 5px, transparent 5px 9px); }
    .node-pattern-btn[data-pattern="soft-spots"] > span:first-child { background-image: radial-gradient(circle at 25% 30%, rgba(93,85,78,.35), transparent 45%), radial-gradient(circle at 75% 70%, rgba(93,85,78,.25), transparent 48%); }
    .node-pattern-btn[data-pattern="accent"] > span:first-child { background: linear-gradient(90deg, #5d554e 0 5px, transparent 5px); }

    .node-pattern-btn small { font-size: 9px; line-height: 1.1; opacity: .72; }
    .node-pattern-btn.active { border-color: #cd6848; box-shadow: 0 0 0 2px rgba(205, 104, 72, .12); }
    .node-style-color-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 3px 0 8px; font-size: 10px; color: #7d756d; }
    .node-style-color-row input[type="color"] { width: 30px; height: 22px; padding: 1px; border: 1px solid rgba(80,70,60,.16); border-radius: 6px; background: transparent; cursor: pointer; }
    .node-style-range-label { display: block; margin: 2px 0 5px; font-size: 10px; color: #7d756d; }
    .node-style-advanced input[type="range"] { width: 100%; accent-color: #cd6848; }

    body.dark .node-style-preset,
    body.dark .node-pattern-btn { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
    body.dark .node-style-advanced { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.12); }
    body.dark #side-panel .node-style-preset,
    body.dark #side-panel .node-pattern-btn,
    body.dark #side-panel .toggle-btn,
    body.dark #side-panel .shape-btn,
    body.dark #side-panel .type-btn,
    body.dark #side-panel .size-btn,
    body.dark #side-panel .font-btn,
    body.dark #side-panel .panel-btn { color: #f1f4f6; }
    body.dark #side-panel .sp-subsection-title,
    body.dark #side-panel .node-style-advanced > summary,
    body.dark #side-panel .node-style-range-label,
    body.dark #side-panel .node-style-color-row { color: #d3d9df; }
    body.dark #side-panel .content-field,
    body.dark #side-panel input:not([type="color"]):not([type="range"]),
    body.dark #side-panel textarea,
    body.dark #side-panel select { color: #f1f4f6; background: #343d48; border-color: #53606d; }
    body.dark .node-pattern-btn > span:first-child,
    body.theme-midnight .node-pattern-btn > span:first-child { border-color: #cbd5dc; }
    body.dark .node-pattern-btn[data-pattern="dots"] > span:first-child,
    body.theme-midnight .node-pattern-btn[data-pattern="dots"] > span:first-child { background-image: radial-gradient(#d9e3ea 1.2px, transparent 1.6px); }
    body.dark .node-pattern-btn[data-pattern="grid"] > span:first-child,
    body.theme-midnight .node-pattern-btn[data-pattern="grid"] > span:first-child { background-image: linear-gradient(#d9e3ea 1px, transparent 1px), linear-gradient(90deg, #d9e3ea 1px, transparent 1px); }
    body.dark .node-pattern-btn[data-pattern="diagonal"] > span:first-child,
    body.theme-midnight .node-pattern-btn[data-pattern="diagonal"] > span:first-child { background-image: repeating-linear-gradient(135deg, #d9e3ea 0 1px, transparent 1px 6px); }
    body.dark .node-pattern-btn[data-pattern="confetti"] > span:first-child,
    body.theme-midnight .node-pattern-btn[data-pattern="confetti"] > span:first-child { background-image: radial-gradient(circle at 20% 30%, #d9e3ea 0 1.5px, transparent 2px), radial-gradient(circle at 70% 70%, #d9e3ea 0 1.5px, transparent 2px), radial-gradient(circle at 85% 25%, #d9e3ea 0 1px, transparent 1.5px); }
    body.dark .node-pattern-btn[data-pattern="brush"] > span:first-child,
    body.theme-midnight .node-pattern-btn[data-pattern="brush"] > span:first-child { background: linear-gradient(155deg, transparent 25%, rgba(217,227,234,.8) 27% 35%, transparent 38% 50%, rgba(217,227,234,.4) 52% 60%, transparent 63%); }
    body.dark .node-pattern-btn[data-pattern="accent"] > span:first-child,
    body.theme-midnight .node-pattern-btn[data-pattern="accent"] > span:first-child { background: linear-gradient(90deg, #d9e3ea 0 5px, transparent 5px); }
    body.dark .lp-tag-group-name,
    body.dark .lp-tag-group-header,
    body.dark .lp-tag-group-count { color: #edf2f5; }

    /* Midnight — отдельная тёмная тема, не использующая класс body.dark */
    body.theme-midnight #side-panel { color: #edf2f5; }
    body.theme-midnight #side-panel .sp-subsection-title,
    body.theme-midnight #side-panel .node-style-advanced > summary,
    body.theme-midnight #side-panel .node-style-range-label,
    body.theme-midnight #side-panel .node-style-color-row { color: #d8e0e6; }
    body.theme-midnight #side-panel .node-style-preset,
    body.theme-midnight #side-panel .node-pattern-btn,
    body.theme-midnight #side-panel .toggle-btn,
    body.theme-midnight #side-panel .shape-btn,
    body.theme-midnight #side-panel .type-btn,
    body.theme-midnight #side-panel .size-btn,
    body.theme-midnight #side-panel .font-btn,
    body.theme-midnight #side-panel .panel-btn { color: #edf2f5; }
    body.theme-midnight #side-panel .content-field,
    body.theme-midnight #side-panel input:not([type="color"]):not([type="range"]),
    body.theme-midnight #side-panel textarea,
    body.theme-midnight #side-panel select { color: #edf2f5; background: #31404d; border-color: #536574; }
    body.theme-midnight .lp-tag-group-name,
    body.theme-midnight .lp-tag-group-header { color: #edf2f5; }
    body.theme-midnight .lp-tag-group-count,
    body.theme-midnight .lp-tag-row .lp-tag-count { color: #b8c5cf; }

    /* У быстрых стилей есть характер и на самой карте, а не только в панели. */
    .node.style-preset-soft { box-shadow: 0 8px 18px rgba(159, 124, 45, .13), 0 0 0 1px rgba(159,124,45,.08); }
    .node.style-preset-business { box-shadow: 0 8px 18px rgba(41, 66, 84, .18), 0 0 0 1px rgba(41,66,84,.14); }
    .node.style-preset-botanical { box-shadow: 0 8px 18px rgba(49, 106, 61, .15), 0 0 0 1px rgba(49,106,61,.12); }
    .node.style-preset-creative { box-shadow: 0 8px 18px rgba(126, 65, 121, .18), 0 0 0 1px rgba(126,65,121,.15); }
    .node-readiness-stripe { position: absolute; z-index: 1; left: 0; top: 0; bottom: 0; width: 7px; border-radius: inherit; opacity: .92; pointer-events: none; }
    .node-readiness-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin-top: 7px; }
    .node-readiness-btn { min-width: 0; min-height: 48px; padding: 6px 3px; border: 1px solid rgba(80,70,60,.14); border-radius: 9px; background: rgba(255,255,255,.56); color: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
    .node-readiness-btn > span { width: 18px; height: 5px; border-radius: 99px; background: var(--readiness-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--readiness-color) 18%, transparent); }
    .node-readiness-btn small { font-size: 8px; line-height: 1.1; opacity: .78; text-align: center; }
    .node-readiness-btn.active { border-color: var(--readiness-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--readiness-color) 18%, transparent); }
    body.dark .node-readiness-btn, body.theme-midnight .node-readiness-btn { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
    body.dark .node-style-advanced > summary,
    body.dark .node-style-range-label,
    body.dark .node-style-color-row { color: #aaa5a0; }

    .shape-btn {
      aspect-ratio: auto;
      min-height: 60px;
      padding: 6px 4px;
      background: #f5f5f7;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      transition: all 0.1s;
      font-family: inherit;
      color: inherit;
    }

    .shape-btn-icon {
      font-size: 18px;
      line-height: 1;
    }

    .shape-btn-label {
      font-size: 9px;
      font-weight: 500;
      color: inherit;
      opacity: 0.7;
      text-align: center;
      line-height: 1.15;
      max-width: 100%;
    }

    .shape-btn:hover {
      background: #e8e8ed;
    }

    .shape-btn.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
    }

    .shape-btn.active .shape-btn-label {
      opacity: 1;
      color: #0071e3;
    }

    body.dark .shape-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .shape-btn:hover {
      background: #48484a;
    }

    body.dark .shape-btn.active {
      background: rgba(0, 113, 227, 0.25);
    }

    .type-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .type-btn {
      padding: 10px 6px;
      background: #f5f5f7;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      transition: all 0.1s;
    }

    .type-btn .ic {
      font-size: 18px;
    }

    .type-btn:hover {
      background: #e8e8ed;
    }

    .type-btn.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
    }

    .size-row,
    .align-row {
      display: grid;
      gap: 6px;
    }

    .size-row {
      grid-template-columns: repeat(3, 1fr);
    }

    .align-row {
      grid-template-columns: repeat(3, 1fr);
    }

    .font-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 6px;
    }

    .size-btn,
    .align-btn,
    .font-btn {
      padding: 8px;
      background: #f5f5f7;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: #1d1d1f;
      transition: all 0.1s;
    }

    .align-btn {
      font-size: 16px;
      padding: 6px;
    }

    .size-btn:hover,
    .align-btn:hover,
    .font-btn:hover {
      background: #e8e8ed;
    }

    .size-btn.active,
    .font-btn.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
      color: #0071e3;
    }

    .panel-btn {
      width: 100%;
      padding: 10px;
      background: #f5f5f7;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: #1d1d1f;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-top: 8px;
      transition: background 0.15s;
    }

    .panel-btn:hover {
      background: #e8e8ed;
    }

    .panel-btn.danger {
      color: #ff3b30;
    }

    .panel-btn.warn {
      color: #ff9500;
    }

    .panel-btn.active {
      background: #0071e3;
      color: #fff;
    }

    .panel-btn.active:hover {
      background: #0058b0;
    }

    .panel-toggle-row {
      display: flex;
      gap: 6px;
      margin-top: 8px;
    }

    .toggle-btn {
      flex: 1;
      padding: 8px;
      background: #f5f5f7;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: #1d1d1f;
      transition: all 0.15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 3px;
    }

    .toggle-btn:hover {
      background: #e8e8ed;
    }

    .toggle-btn .ic {
      font-size: 16px;
    }

    .toggle-btn.on {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
    }

    body.dark .toggle-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .toggle-btn:hover {
      background: #48484a;
    }

    body.dark .toggle-btn.on {
      background: rgba(0, 113, 227, 0.3);
    }

    input[type="color"] {
      width: 100%;
      height: 36px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      background: transparent;
      margin-top: 8px;
    }

    .thickness-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }

    .thickness-btn {
      padding: 8px;
      background: #f5f5f7;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .thickness-btn.active {
      border-color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
    }

    .thickness-btn .line {
      width: 20px;
      background: #1d1d1f;
      border-radius: 2px;
    }

    .tag-input-row {
      display: flex;
      gap: 6px;
      margin-top: 6px;
    }

    .tag-input-row input {
      flex: 1 1 auto;
      min-width: 0;
      padding: 8px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fff;
      color: inherit;
    }

    .tag-input-row input:focus {
      border-color: #0071e3;
    }

    .tag-input-row button {
      flex: 0 0 auto;
      padding: 8px 12px;
      background: #0071e3;
      color: #fff;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
    }

    .current-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-top: 8px;
    }

    .tag-chip {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      background: #0071e3;
      color: #fff;
      border-radius: 6px;
      font-size: 11px;
      font-weight: 500;
    }

    .tag-chip .rm {
      cursor: pointer;
      opacity: 0.7;
    }

    .tag-chip .rm:hover {
      opacity: 1;
    }

    .url-input {
      width: 100%;
      padding: 10px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fff;
      color: inherit;
      margin-top: 6px;
    }

    .url-input:focus {
      border-color: #0071e3;
    }

    /* ─── Палитры стилей ─── */
    .palettes-block {
      margin-top: 10px;
      padding: 10px;
      background: rgba(0, 0, 0, 0.02);
      border-radius: 10px;
      border: 1px solid rgba(0, 0, 0, 0.05);
    }

    .palettes-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 6px;
      margin-bottom: 8px;
    }

    .palettes-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .palettes-save-btn {
      padding: 4px 8px;
      background: #0071e3;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
      font-weight: 500;
      font-family: inherit;
      transition: background 0.15s;
      white-space: nowrap;
    }

    .palettes-save-btn:hover {
      background: #0058b0;
    }

    .palettes-empty {
      font-size: 11px;
      color: #86868b;
      line-height: 1.4;
      padding: 6px 4px;
      text-align: center;
      font-style: italic;
    }

    .palettes-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
      margin-bottom: 8px;
    }

    .palette-item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 6px 4px 4px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
      border: 1px solid transparent;
    }

    .palette-item:hover {
      background: rgba(0, 113, 227, 0.08);
      border-color: rgba(0, 113, 227, 0.2);
    }

    .palette-preview {
      width: 100%;
      aspect-ratio: 1;
      max-width: 48px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05);
    }

    .palette-preview-letter {
      font-size: 13px;
      font-weight: 700;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      line-height: 1;
      user-select: none;
    }

    .palette-name {
      font-size: 10px;
      color: #1d1d1f;
      font-weight: 500;
      text-align: center;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.2;
    }

    .palette-del {
      position: absolute;
      top: -4px;
      right: -4px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      color: #86868b;
      border: 1px solid rgba(0, 0, 0, 0.1);
      cursor: pointer;
      font-size: 9px;
      line-height: 1;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-family: inherit;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
      z-index: 2;
    }

    .palette-item:hover .palette-del {
      display: flex;
    }

    .palette-del:hover {
      background: #ff3b30;
      color: #fff;
      border-color: #ff3b30;
    }

    .palettes-footer {
      display: flex;
      gap: 6px;
      margin-top: 4px;
      padding-top: 8px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .palettes-mini-btn {
      flex: 1;
      padding: 5px 6px;
      background: transparent;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 6px;
      cursor: pointer;
      font-size: 10px;
      font-weight: 500;
      color: #86868b;
      font-family: inherit;
      transition: all 0.15s;
    }

    .palettes-mini-btn:hover {
      background: rgba(0, 113, 227, 0.06);
      color: #0071e3;
      border-color: rgba(0, 113, 227, 0.3);
    }

    /* Тёмная тема */
    body.dark .palettes-block {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.06);
    }

    body.dark .palette-item:hover {
      background: rgba(0, 113, 227, 0.2);
    }

    body.dark .palette-name {
      color: #f5f5f7;
    }

    body.dark .palette-del {
      background: #3a3a3c;
      color: #f5f5f7;
      border-color: rgba(255, 255, 255, 0.15);
    }

    body.dark .palette-del:hover {
      background: #ff3b30;
      color: #fff;
    }

    body.dark .palettes-footer {
      border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.dark .palettes-mini-btn {
      border-color: rgba(255, 255, 255, 0.1);
      color: #a1a1a6;
    }

    body.dark .palettes-mini-btn:hover {
      background: rgba(0, 113, 227, 0.25);
      color: #4a9eff;
    }

    /* 🎓 Академия */
    body.theme-academy .palettes-block {
      background: rgba(232, 224, 200, 0.04);
      border-color: rgba(232, 224, 200, 0.08);
    }

    body.theme-academy .palette-name {
      color: #e8e0c8;
    }

    body.theme-academy .palettes-mini-btn {
      border-color: rgba(232, 224, 200, 0.15);
      color: #a09475;
    }

    /* 🌊 Неон */
    body.theme-neon .palettes-block {
      background: rgba(0, 240, 255, 0.04);
      border-color: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .palette-name {
      color: #e8f0ff;
    }

    body.theme-neon .palettes-mini-btn {
      border-color: rgba(0, 240, 255, 0.15);
      color: #8a9bc7;
    }

    body.theme-neon .palettes-mini-btn:hover {
      background: rgba(0, 240, 255, 0.1);
      color: #00f0ff;
    }


    /* ───────── [STYLES: emoji-picker] Эмодзи-пикер ───────── */
    #emoji-picker {
      position: fixed;
      z-index: 3500;
      width: 320px;
      max-height: 380px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
      display: none;
      flex-direction: column;
      overflow: hidden;
    }

    #emoji-picker.open {
      display: flex;
    }

    #emoji-picker .ep-search {
      padding: 10px 12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      flex-shrink: 0;
    }

    #emoji-picker .ep-search input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fafafa;
      color: inherit;
      font-family: inherit;
    }

    #emoji-picker .ep-search input:focus {
      border-color: #0071e3;
      background: #fff;
    }

    #emoji-picker .ep-body {
      overflow-y: auto;
      padding: 8px 8px 12px;
      flex: 1;
    }

    #emoji-picker .ep-category {
      margin-bottom: 8px;
    }

    #emoji-picker .ep-cat-name {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 6px 4px 4px;
    }

    #emoji-picker .ep-grid {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 2px;
    }

    #emoji-picker .ep-btn {
      aspect-ratio: 1;
      border: none;
      background: transparent;
      border-radius: 6px;
      cursor: pointer;
      font-size: 18px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.1s, transform 0.1s;
      padding: 0;
    }

    #emoji-picker .ep-btn:hover {
      background: rgba(0, 113, 227, 0.12);
      transform: scale(1.15);
    }

    #emoji-picker .ep-empty {
      padding: 20px;
      text-align: center;
      font-size: 13px;
      color: #86868b;
    }

    body.dark #emoji-picker {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    body.dark #emoji-picker .ep-search {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    body.dark #emoji-picker .ep-search input {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.dark #emoji-picker .ep-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Кнопка вызова пикера рядом с полями */
    .emoji-trigger {
      width: 32px;
      height: 32px;
      border: none;
      background: #f5f5f7;
      border-radius: 8px;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: background 0.15s;
      padding: 0;
    }

    .emoji-trigger:hover {
      background: #e8e8ed;
    }

    body.dark .emoji-trigger {
      background: #3a3a3c;
    }

    body.dark .emoji-trigger:hover {
      background: #48484a;
    }


    /* ───────── [STYLES: minimap] Мини-карта в левой панели ───────── */
    .lp-minimap-wrap {
      flex-shrink: 0;
      padding: 10px 12px 14px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .lp-minimap-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 8px;
    }

    #minimap {
      position: relative;
      width: 100%;
      height: 140px;
      background: rgba(0, 0, 0, 0.03);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: background 0.15s;
    }

    #minimap:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    #minimap svg {
      width: 100%;
      height: 100%;
      display: block;
    }

    body.dark .lp-minimap-wrap {
      border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.dark #minimap {
      background: rgba(255, 255, 255, 0.06);
    }

    body.dark #minimap:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* ───────── [STYLES: lightbox] Лайтбокс ───────── */
    #lightbox {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.9);
      z-index: 2000;
      display: none;
      align-items: center;
      justify-content: center;
      cursor: zoom-out;
    }

    #lightbox.open {
      display: flex;
    }

    #lightbox img {
      max-width: 90vw;
      max-height: 90vh;
      border-radius: 8px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    }

    /* ───────── [STYLES: file-preview] Предпросмотр вложений ───────── */
    .file-preview-modal {
      position: fixed;
      inset: 0;
      z-index: 12000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
    }

    .file-preview-modal.open { display: flex; }

    .file-preview-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(20, 24, 30, .58);
      backdrop-filter: blur(4px);
    }

    .file-preview-dialog {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      width: min(1000px, 96vw);
      height: min(820px, 92vh);
      overflow: hidden;
      border-radius: 16px;
      background: #fff;
      box-shadow: 0 18px 60px rgba(0, 0, 0, .3);
    }

    .file-preview-header {
      display: flex;
      align-items: center;
      gap: 12px;
      min-height: 48px;
      padding: 0 14px 0 18px;
      border-bottom: 1px solid rgba(80, 70, 60, .12);
      color: #1d1d1f;
    }

    /* Название файла — ссылка на скачивание */
    .file-preview-title {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      color: inherit;
      font-weight: 600;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-decoration: none;
    }

    .file-preview-title:hover { text-decoration: underline; }

    .file-preview-meta { flex: 0 0 auto; color: #86868b; font-size: 12px; white-space: nowrap; }

    .file-preview-header button {
      border: 0;
      background: transparent;
      color: inherit;
      font-size: 26px;
      line-height: 1;
      cursor: pointer;
    }

    /* Прокручиваемая область со страницами PDF / картинкой / текстом */
    .file-preview-body {
      flex: 1;
      min-height: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      background: #ebe7e1;
    }

    .file-preview-pages {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      padding: 16px;
    }

    .file-preview-page {
      width: 100%;
      max-width: 900px;
      background: #fff;
      box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
    }

    .file-preview-page canvas { display: block; width: 100%; height: 100%; }

    .file-preview-image {
      display: block;
      max-width: 100%;
      max-height: 100%;
      margin: auto;
      object-fit: contain;
    }

    .file-preview-text {
      margin: 0;
      min-height: 100%;
      padding: 18px 20px;
      background: #fff;
      color: #1d1d1f;
      font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .file-preview-message {
      padding: 40px 24px;
      color: #6e6e73;
      font-size: 14px;
      text-align: center;
    }

    .file-preview-message.error { color: #c45e49; }

    @media (max-width: 640px) {
      .file-preview-modal { padding: 0; }
      .file-preview-dialog { width: 100vw; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top); }
      .file-preview-pages { padding: 10px 8px; gap: 10px; }
    }

    body.dark .file-preview-dialog,
    body.theme-midnight .file-preview-dialog { background: #202831; color: #edf2f5; }
    body.dark .file-preview-header,
    body.theme-midnight .file-preview-header { color: #edf2f5; border-color: rgba(255, 255, 255, .14); }
    body.dark .file-preview-body,
    body.theme-midnight .file-preview-body { background: #151b21; }
    body.dark .file-preview-text,
    body.theme-midnight .file-preview-text { background: #1b232b; color: #edf2f5; }
    body.dark .file-preview-message,
    body.theme-midnight .file-preview-message { color: #a7b1ba; }

    /* ───────── [STYLES: graph-view] Граф связей ───────── */
    #graph-view {
      position: fixed;
      inset: 0;
      background: rgba(10, 10, 15, 0.96);
      z-index: 4500;
      display: none;
      flex-direction: column;
    }

    #graph-view.open {
      display: flex;
    }

    #graph-canvas-wrap {
      flex: 1;
      position: relative;
      overflow: hidden;
      cursor: grab;
    }

    #graph-canvas-wrap.dragging {
      cursor: grabbing;
    }

    #graph-canvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    #graph-toolbar {
      position: absolute;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 4px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 6px;
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
      z-index: 10;
    }

    #graph-toolbar .graph-btn {
      padding: 8px 14px;
      border: none;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: #f5f5f7;
      transition: background 0.15s;
      display: flex;
      align-items: center;
      gap: 6px;
      font-family: inherit;
      white-space: nowrap;
    }

    #graph-toolbar .graph-btn:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    #graph-toolbar .graph-btn.active {
      background: #0071e3;
      color: #fff;
    }

    #graph-toolbar .graph-sep {
      width: 1px;
      background: rgba(255, 255, 255, 0.12);
      margin: 4px 4px;
    }

    #graph-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 44px;
      height: 44px;
      border: none;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      z-index: 10;
    }

    #graph-close:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    #graph-info {
      position: absolute;
      bottom: 24px;
      left: 24px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 12px 18px;
      border-radius: 12px;
      color: #f5f5f7;
      font-size: 12px;
      line-height: 1.6;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
      max-width: 320px;
      pointer-events: none;
      opacity: 0.9;
    }

    #graph-info .gi-title {
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 6px;
      color: #fff;
    }

    #graph-info .gi-stat {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin: 2px 0;
    }

    #graph-info .gi-stat-label {
      color: rgba(255, 255, 255, 0.6);
    }

    #graph-info .gi-stat-value {
      font-weight: 600;
      color: #fff;
    }

    #graph-hint {
      position: absolute;
      bottom: 24px;
      right: 24px;
      color: rgba(255, 255, 255, 0.5);
      font-size: 12px;
      text-align: right;
      line-height: 1.5;
      pointer-events: none;
    }

    #graph-hint kbd {
      display: inline-block;
      padding: 1px 6px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
      font-family: inherit;
      font-size: 11px;
      color: #f5f5f7;
    }

    /* Тулбар-кнопка в основном тулбаре */
    #btn-graph {
      /* наследует .btn */
    }

    /* ─── Панель поиска в графе ─── */
    #graph-search-panel {
      position: absolute;
      top: 82px;
      /* под тулбаром графа */
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      gap: 4px;
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 8px 10px;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08);
      z-index: 10;
      min-width: 480px;
      max-width: 90vw;
    }

    .gsp-row {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .gsp-row-main {
      /* Основная строка: иконка + input + счётчик + стрелки */
    }

    .gsp-row-mode {
      /* Вторая строка: кнопки режима */
      padding-top: 4px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
    }

    #graph-search-panel .gsp-icon {
      font-size: 13px;
      color: rgba(255, 255, 255, 0.6);
      flex-shrink: 0;
      user-select: none;
    }

    #graph-search-input {
      flex: 1;
      min-width: 0;
      padding: 6px 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 8px;
      color: #f5f5f7;
      font-size: 13px;
      font-family: inherit;
      outline: none;
      transition: border-color 0.15s, background 0.15s;
    }

    #graph-search-input:focus {
      border-color: #4a9eff;
      background: rgba(255, 255, 255, 0.12);
    }

    #graph-search-input::placeholder {
      color: rgba(255, 255, 255, 0.4);
    }

    .gsp-counter {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.55);
      font-variant-numeric: tabular-nums;
      min-width: 72px;
      text-align: right;
      white-space: nowrap;
      flex-shrink: 0;
      transition: color 0.15s;
    }

    .gsp-counter.has-matches {
      color: #ffcc00;
      font-weight: 600;
    }

    .gsp-counter.no-matches {
      color: rgba(255, 100, 100, 0.9);
    }

    .gsp-nav {
      width: 28px;
      height: 28px;
      border: none;
      background: rgba(255, 255, 255, 0.08);
      color: #f5f5f7;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      flex-shrink: 0;
      padding: 0;
      font-family: inherit;
    }

    .gsp-nav:hover {
      background: rgba(255, 255, 255, 0.18);
    }

    .gsp-nav:active {
      background: rgba(255, 255, 255, 0.25);
    }

    /* Кнопки режима */
    .gsp-mode-btn {
      padding: 5px 10px;
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid transparent;
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.7);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .gsp-mode-btn:hover {
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
    }

    .gsp-mode-btn.active {
      background: #4a9eff;
      color: #fff;
      border-color: rgba(255, 255, 255, 0.2);
      box-shadow: 0 2px 8px rgba(74, 158, 255, 0.3);
    }

    .gsp-spacer {
      flex: 1;
    }

    .gsp-reset {
      padding: 5px 10px;
      background: transparent;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 6px;
      color: rgba(255, 255, 255, 0.6);
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      white-space: nowrap;
    }

    .gsp-reset:hover {
      background: rgba(255, 100, 100, 0.15);
      color: #ff6b6b;
      border-color: rgba(255, 100, 100, 0.3);
    }

    /* ─── Badge на кнопке тегов ─── */
    .graph-btn-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      margin-left: 6px;
      background: #ffcc00;
      color: #1d1d1f;
      border-radius: 8px;
      font-size: 10px;
      font-weight: 700;
      line-height: 1;
      font-variant-numeric: tabular-nums;
    }

    /* ─── Поповер фильтра по тегам ─── */
    #graph-tags-popover {
      position: absolute;
      top: 82px;
      left: 50%;
      transform: translateX(-50%);
      display: none;
      flex-direction: column;
      background: rgba(30, 30, 35, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1);
      z-index: 20;
      min-width: 280px;
      max-width: 380px;
      max-height: 60vh;
      overflow: hidden;
    }

    #graph-tags-popover.open {
      display: flex;
    }

    #graph-tags-popover .gtp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 14px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
    }

    #graph-tags-popover .gtp-title {
      font-size: 12px;
      font-weight: 600;
      color: #f5f5f7;
      letter-spacing: 0.02em;
    }

    #graph-tags-popover .gtp-close {
      width: 22px;
      height: 22px;
      border: none;
      background: transparent;
      color: rgba(255, 255, 255, 0.5);
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s;
      padding: 0;
      font-family: inherit;
    }

    #graph-tags-popover .gtp-close:hover {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }

    #graph-tags-popover .gtp-body {
      overflow-y: auto;
      padding: 8px;
      flex: 1;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
    }

    #graph-tags-popover .gtp-body::-webkit-scrollbar {
      width: 6px;
    }

    #graph-tags-popover .gtp-body::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
    }

    #graph-tags-popover .gtp-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #f5f5f7;
      transition: background 0.1s;
      user-select: none;
    }

    #graph-tags-popover .gtp-row:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    #graph-tags-popover .gtp-row input[type="checkbox"] {
      cursor: pointer;
      accent-color: #4a9eff;
      width: 15px;
      height: 15px;
      flex-shrink: 0;
    }

    #graph-tags-popover .gtp-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #graph-tags-popover .gtp-count {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.45);
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    #graph-tags-popover .gtp-sep {
      height: 1px;
      background: rgba(255, 255, 255, 0.08);
      margin: 6px 8px;
    }

    #graph-tags-popover .gtp-row-untagged .gtp-name {
      font-style: italic;
      opacity: 0.75;
    }

    #graph-tags-popover .gtp-empty {
      padding: 20px 16px;
      text-align: center;
      font-size: 12px;
      color: rgba(255, 255, 255, 0.45);
      line-height: 1.5;
    }

    #graph-tags-popover .gtp-footer {
      display: flex;
      gap: 6px;
      padding: 8px 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.08);
      flex-shrink: 0;
    }

    #graph-tags-popover .gtp-btn {
      flex: 1;
      padding: 6px 10px;
      background: rgba(255, 255, 255, 0.08);
      border: none;
      border-radius: 6px;
      color: #f5f5f7;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      transition: background 0.15s;
      font-family: inherit;
    }

    #graph-tags-popover .gtp-btn:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    /* ─── Легенда кластеров ─── */
    #graph-cluster-legend {
      position: absolute;
      bottom: 24px;
      right: 24px;
      display: none;
      flex-direction: column;
      gap: 6px;
      background: rgba(30, 30, 35, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      padding: 10px 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08);
      z-index: 10;
      max-width: 220px;
      max-height: 50vh;
      overflow: hidden;
    }

    #graph-cluster-legend.open {
      display: flex;
    }

    #graph-cluster-legend .gcl-title {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.65);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding-bottom: 6px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    #graph-cluster-legend .gcl-list {
      display: flex;
      flex-direction: column;
      gap: 2px;
      overflow-y: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
      max-height: calc(50vh - 60px);
    }

    #graph-cluster-legend .gcl-list::-webkit-scrollbar {
      width: 6px;
    }

    #graph-cluster-legend .gcl-list::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.2);
      border-radius: 3px;
    }

    #graph-cluster-legend .gcl-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 5px 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s;
      font-size: 12px;
      color: #f5f5f7;
      user-select: none;
    }

    #graph-cluster-legend .gcl-item:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    #graph-cluster-legend .gcl-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 6px currentColor;
    }

    #graph-cluster-legend .gcl-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #graph-cluster-legend .gcl-count {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.5);
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    /* Адаптив для мобильных */
    @media (max-width: 700px) {
      #graph-search-panel {
        min-width: auto;
        width: calc(100vw - 32px);
        top: 140px;
        /* тулбар графа на мобильном выше */
      }

      .gsp-counter {
        min-width: 56px;
        font-size: 10px;
      }

      .gsp-mode-btn {
        font-size: 10px;
        padding: 4px 8px;
      }
    }


    /* ───────── [STYLES: table-view] Таблица нод ───────── */
    #table-view {
      position: fixed;
      inset: 0;
      background: #f5f5f7;
      z-index: 4500;
      display: none;
      flex-direction: column;
    }

    #table-view.open {
      display: flex;
    }

    body.dark #table-view,
    body.theme-academy #table-view {
      background: #1c1c1e;
    }

    body.theme-neon #table-view {
      background: #0a0e27;
    }

    /* ─── Тулбар ─── */
    #table-toolbar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 16px 24px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      flex-shrink: 0;
      flex-wrap: wrap;
    }

    body.dark #table-toolbar,
    body.theme-academy #table-toolbar {
      background: rgba(40, 40, 42, 0.95);
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    body.theme-neon #table-toolbar {
      background: rgba(10, 14, 39, 0.95);
      border-bottom-color: rgba(0, 240, 255, 0.15);
    }

    #table-toolbar .tv-title {
      font-size: 16px;
      font-weight: 700;
      color: #1d1d1f;
      margin-right: 12px;
    }

    body.dark #table-toolbar .tv-title,
    body.theme-academy #table-toolbar .tv-title {
      color: #f5f5f7;
    }

    body.theme-neon #table-toolbar .tv-title {
      color: #e8f0ff;
    }

    #table-toolbar .tv-search {
      flex: 1;
      min-width: 180px;
      max-width: 320px;
      padding: 8px 14px;
      border: 1px solid #e0e0e0;
      border-radius: 10px;
      font-size: 13px;
      outline: none;
      background: #fff;
      color: inherit;
      font-family: inherit;
    }

    #table-toolbar .tv-search:focus {
      border-color: #0071e3;
    }

    body.dark #table-toolbar .tv-search,
    body.theme-academy #table-toolbar .tv-search {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.theme-neon #table-toolbar .tv-search {
      background: #1a1f45;
      border-color: #2d3a6a;
      color: #e8f0ff;
    }

    #table-toolbar .tv-btn {
      padding: 8px 14px;
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 500;
      color: #1d1d1f;
      font-family: inherit;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
      white-space: nowrap;
    }

    #table-toolbar .tv-btn:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    #table-toolbar .tv-btn.active {
      background: #0071e3;
      color: #fff;
    }

    body.dark #table-toolbar .tv-btn,
    body.theme-academy #table-toolbar .tv-btn {
      color: #f5f5f7;
    }

    body.dark #table-toolbar .tv-btn:hover,
    body.theme-academy #table-toolbar .tv-btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    body.theme-neon #table-toolbar .tv-btn {
      color: #e8f0ff;
    }

    #table-toolbar .tv-close {
      width: 36px;
      height: 36px;
      border: none;
      background: rgba(0, 0, 0, 0.06);
      color: inherit;
      border-radius: 50%;
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: auto;
      transition: background 0.15s;
    }

    #table-toolbar .tv-close:hover {
      background: rgba(0, 0, 0, 0.12);
    }

    body.dark #table-toolbar .tv-close,
    body.theme-academy #table-toolbar .tv-close {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark #table-toolbar .tv-close:hover,
    body.theme-academy #table-toolbar .tv-close:hover {
      background: rgba(255, 255, 255, 0.15);
    }

    /* ─── Обёртка для скролла ─── */
    #table-wrap {
      flex: 1;
      overflow: auto;
      padding: 16px 24px 40px;
    }

    /* ─── Сама таблица ─── */
    #table-view table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    body.dark #table-view table,
    body.theme-academy #table-view table {
      background: #2c2c2e;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    body.theme-neon #table-view table {
      background: #0f1535;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 240, 255, 0.15);
    }

    #table-view thead th {
      position: sticky;
      top: 0;
      background: #fafafa;
      border-bottom: 2px solid rgba(0, 0, 0, 0.08);
      padding: 12px 14px;
      text-align: left;
      font-size: 12px;
      font-weight: 700;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      cursor: pointer;
      user-select: none;
      white-space: nowrap;
      z-index: 2;
      transition: background 0.15s, color 0.15s;
    }

    #table-view thead th:hover {
      background: #f0f0f3;
      color: #1d1d1f;
    }

    #table-view thead th.sorted {
      color: #0071e3;
    }

    #table-view thead th .sort-arrow {
      display: inline-block;
      margin-left: 4px;
      font-size: 10px;
      opacity: 0.5;
    }

    #table-view thead th.sorted .sort-arrow {
      opacity: 1;
    }

    body.dark #table-view thead th,
    body.theme-academy #table-view thead th {
      background: #3a3a3c;
      border-bottom-color: rgba(255, 255, 255, 0.1);
      color: #a1a1a6;
    }

    body.dark #table-view thead th:hover,
    body.theme-academy #table-view thead th:hover {
      background: #48484a;
      color: #f5f5f7;
    }

    body.theme-neon #table-view thead th {
      background: #1a1f45;
      border-bottom-color: rgba(0, 240, 255, 0.2);
      color: #8a9bc7;
    }

    body.theme-neon #table-view thead th:hover {
      background: #232a5c;
      color: #e8f0ff;
    }

    #table-view tbody tr {
      transition: background 0.1s;
      cursor: pointer;
    }

    #table-view tbody tr:hover {
      background: rgba(0, 113, 227, 0.04);
    }

    #table-view tbody tr.selected {
      background: rgba(0, 113, 227, 0.1);
    }

    body.dark #table-view tbody tr:hover,
    body.theme-academy #table-view tbody tr:hover {
      background: rgba(0, 113, 227, 0.15);
    }

    body.theme-neon #table-view tbody tr:hover {
      background: rgba(0, 240, 255, 0.08);
    }

    #table-view tbody td {
      padding: 10px 14px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.05);
      font-size: 13px;
      color: #1d1d1f;
      vertical-align: middle;
    }

    body.dark #table-view tbody td,
    body.theme-academy #table-view tbody td {
      border-bottom-color: rgba(255, 255, 255, 0.06);
      color: #f5f5f7;
    }

    body.theme-neon #table-view tbody td {
      border-bottom-color: rgba(0, 240, 255, 0.08);
      color: #e8f0ff;
    }

    #table-view tbody tr:last-child td {
      border-bottom: none;
    }

    /* ─── Ячейки ─── */
    #table-view .tv-title-cell {
      font-weight: 600;
      max-width: 320px;
    }

    #table-view .tv-title-cell .tv-title-input {
      width: 100%;
      background: transparent;
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 4px 6px;
      font: inherit;
      font-weight: 600;
      color: inherit;
      outline: none;
      transition: border-color 0.15s, background 0.15s;
    }

    #table-view .tv-title-cell .tv-title-input:hover {
      border-color: rgba(0, 0, 0, 0.1);
    }

    #table-view .tv-title-cell .tv-title-input:focus {
      border-color: #0071e3;
      background: #fff;
    }

    body.dark #table-view .tv-title-cell .tv-title-input:focus,
    body.theme-academy #table-view .tv-title-cell .tv-title-input:focus {
      background: #1c1c1e;
    }

    /* Цвет ноды — цветной квадратик слева */
    #table-view .tv-color-dot {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      margin-right: 8px;
      vertical-align: middle;
      border: 1px solid rgba(0, 0, 0, 0.1);
      flex-shrink: 0;
    }

    /* Теги-чипы */
    #table-view .tv-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
    }

    #table-view .tv-tag {
      font-size: 10px;
      padding: 2px 7px;
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
      border-radius: 4px;
      font-weight: 500;
      white-space: nowrap;
    }

    body.dark #table-view .tv-tag,
    body.theme-academy #table-view .tv-tag {
      background: rgba(74, 158, 255, 0.2);
      color: #4a9eff;
    }

    /* Дата */
    #table-view .tv-date {
      font-size: 12px;
      font-weight: 600;
      padding: 3px 8px;
      border-radius: 6px;
      background: rgba(0, 0, 0, 0.06);
      color: #1d1d1f;
      display: inline-block;
      white-space: nowrap;
    }

    #table-view .tv-date.soon {
      background: rgba(255, 204, 0, 0.2);
      color: #b8860b;
    }

    #table-view .tv-date.today {
      background: rgba(52, 199, 89, 0.2);
      color: #1a7a35;
    }

    #table-view .tv-date.overdue {
      background: rgba(255, 59, 48, 0.18);
      color: #c9241d;
    }

    body.dark #table-view .tv-date.soon {
      color: #ffcc00;
    }

    body.dark #table-view .tv-date.today {
      color: #5dd67a;
    }

    body.dark #table-view .tv-date.overdue {
      color: #ff6b5e;
    }

    /* Прогресс-бар в ячейке */
    #table-view .tv-progress-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 100px;
    }

    #table-view .tv-progress-bar {
      flex: 1;
      height: 6px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 3px;
      overflow: hidden;
    }

    #table-view .tv-progress-fill {
      height: 100%;
      border-radius: 3px;
      transition: width 0.2s;
    }

    #table-view .tv-progress-value {
      font-size: 11px;
      font-weight: 600;
      min-width: 32px;
      text-align: right;
    }

    body.dark #table-view .tv-progress-bar,
    body.theme-academy #table-view .tv-progress-bar {
      background: rgba(255, 255, 255, 0.12);
    }

    /* Бейджи статуса */
    #table-view .tv-badge {
      display: inline-block;
      font-size: 11px;
      margin-right: 4px;
      opacity: 0.7;
    }

    /* Числа (связи) */
    #table-view .tv-number {
      font-variant-numeric: tabular-nums;
      font-weight: 600;
    }

    /* ─── Панель колонок ─── */
    #table-columns-panel {
      position: absolute;
      top: 70px;
      right: 24px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
      padding: 8px;
      min-width: 220px;
      z-index: 10;
      display: none;
    }

    #table-columns-panel.open {
      display: block;
    }

    body.dark #table-columns-panel,
    body.theme-academy #table-columns-panel {
      background: rgba(40, 40, 42, 0.98);
    }

    body.theme-neon #table-columns-panel {
      background: rgba(10, 14, 39, 0.98);
    }

    #table-columns-panel .cp-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 8px 10px 4px;
    }

    #table-columns-panel label {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 6px 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      transition: background 0.1s;
    }

    #table-columns-panel label:hover {
      background: rgba(0, 113, 227, 0.08);
    }

    #table-columns-panel label input {
      accent-color: #0071e3;
      cursor: pointer;
    }

    body.dark #table-columns-panel label,
    body.theme-academy #table-columns-panel label {
      color: #f5f5f7;
    }

    body.theme-neon #table-columns-panel label {
      color: #e8f0ff;
    }

    /* ─── Пусто ─── */
    #table-view .tv-empty {
      padding: 60px 20px;
      text-align: center;
      color: #86868b;
      font-size: 14px;
    }

    /* ─── Фильтры ─── */
    #table-filters {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 0 24px 12px;
      flex-wrap: wrap;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    body.dark #table-filters,
    body.theme-academy #table-filters {
      background: rgba(40, 40, 42, 0.95);
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    body.theme-neon #table-filters {
      background: rgba(10, 14, 39, 0.95);
      border-bottom-color: rgba(0, 240, 255, 0.15);
    }

    /* Чип активного фильтра */
    .tv-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      background: #f0f0f3;
      border: 1px solid transparent;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 500;
      color: #1d1d1f;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      white-space: nowrap;
    }

    .tv-filter-chip:hover {
      background: #e8e8ed;
    }

    .tv-filter-chip.active {
      background: rgba(0, 113, 227, 0.12);
      color: #0071e3;
      border-color: rgba(0, 113, 227, 0.4);
    }

    .tv-filter-chip .tvfc-close {
      font-size: 12px;
      opacity: 0.5;
      margin-left: 2px;
    }

    .tv-filter-chip .tvfc-close:hover {
      opacity: 1;
    }

    .tv-filter-chip.add {
      border-style: dashed;
      border-color: #c7c7cc;
      background: transparent;
      color: #86868b;
    }

    .tv-filter-chip.add:hover {
      border-color: #0071e3;
      color: #0071e3;
      background: rgba(0, 113, 227, 0.04);
    }

    body.dark .tv-filter-chip,
    body.theme-academy .tv-filter-chip {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .tv-filter-chip:hover,
    body.theme-academy .tv-filter-chip:hover {
      background: #48484a;
    }

    body.dark .tv-filter-chip.add,
    body.theme-academy .tv-filter-chip.add {
      background: transparent;
      border-color: #48484a;
      color: #a1a1a6;
    }

    body.theme-neon .tv-filter-chip {
      background: #1a1f45;
      color: #e8f0ff;
    }

    body.theme-neon .tv-filter-chip.add {
      background: transparent;
      border-color: #2d3a6a;
      color: #8a9bc7;
    }

    /* Выпадашка фильтра */
    .tv-filter-menu {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 6px;
      background: #fff;
      border-radius: 10px;
      padding: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.06);
      min-width: 220px;
      max-height: 340px;
      overflow-y: auto;
      z-index: 100;
      display: none;
    }

    .tv-filter-menu.open {
      display: block;
    }

    body.dark .tv-filter-menu,
    body.theme-academy .tv-filter-menu {
      background: #2c2c2e;
    }

    body.theme-neon .tv-filter-menu {
      background: #0f1535;
    }

    .tv-filter-menu .tf-title {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      padding: 6px 8px 4px;
    }

    .tv-filter-menu label {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 8px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      transition: background 0.1s;
    }

    .tv-filter-menu label:hover {
      background: rgba(0, 113, 227, 0.08);
    }

    .tv-filter-menu label input {
      accent-color: #0071e3;
      cursor: pointer;
    }

    .tv-filter-menu .tf-count {
      margin-left: auto;
      font-size: 11px;
      color: #86868b;
    }

    .tv-filter-menu .tf-input {
      width: 100%;
      padding: 6px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      font-size: 13px;
      outline: none;
      background: #fafafa;
      color: inherit;
      font-family: inherit;
      margin: 4px 0;
    }

    .tv-filter-menu .tf-input:focus {
      border-color: #0071e3;
      background: #fff;
    }

    .tv-filter-menu .tf-actions {
      display: flex;
      gap: 6px;
      padding: 6px 4px 2px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      margin-top: 6px;
    }

    .tv-filter-menu .tf-actions button {
      flex: 1;
      padding: 6px 10px;
      background: #f5f5f7;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: #1d1d1f;
      font-family: inherit;
    }

    .tv-filter-menu .tf-actions button:hover {
      background: #e8e8ed;
    }

    .tv-filter-menu .tf-actions button.primary {
      background: #0071e3;
      color: #fff;
    }

    .tv-filter-menu .tf-actions button.primary:hover {
      background: #0058b0;
    }

    body.dark .tv-filter-menu label,
    body.theme-academy .tv-filter-menu label {
      color: #f5f5f7;
    }

    body.dark .tv-filter-menu .tf-input,
    body.theme-academy .tv-filter-menu .tf-input {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.dark .tv-filter-menu .tf-actions button,
    body.theme-academy .tv-filter-menu .tf-actions button {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .tv-filter-menu .tf-actions button:hover,
    body.theme-academy .tv-filter-menu .tf-actions button:hover {
      background: #48484a;
    }

    /* ─── Множественный выбор строк ─── */
    #table-view tbody tr.multi-selected {
      background: rgba(0, 113, 227, 0.15);
      box-shadow: inset 3px 0 0 #0071e3;
    }

    #table-view tbody tr.multi-selected:hover {
      background: rgba(0, 113, 227, 0.2);
    }

    /* Панель массовых действий */
    #table-bulk-actions {
      position: sticky;
      bottom: 0;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      padding: 10px 24px;
      display: none;
      align-items: center;
      gap: 10px;
      z-index: 5;
      box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }

    #table-bulk-actions.open {
      display: flex;
    }

    body.dark #table-bulk-actions,
    body.theme-academy #table-bulk-actions {
      background: rgba(40, 40, 42, 0.98);
      border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.theme-neon #table-bulk-actions {
      background: rgba(10, 14, 39, 0.98);
      border-top-color: rgba(0, 240, 255, 0.15);
    }

    #table-bulk-actions .tba-count {
      font-size: 13px;
      font-weight: 600;
      color: #1d1d1f;
      margin-right: auto;
    }

    body.dark #table-bulk-actions .tba-count,
    body.theme-academy #table-bulk-actions .tba-count {
      color: #f5f5f7;
    }

    body.theme-neon #table-bulk-actions .tba-count {
      color: #e8f0ff;
    }

    #table-bulk-actions .tba-btn {
      padding: 7px 14px;
      background: #f5f5f7;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: #1d1d1f;
      font-family: inherit;
      display: flex;
      align-items: center;
      gap: 6px;
      transition: background 0.15s;
    }

    #table-bulk-actions .tba-btn:hover {
      background: #e8e8ed;
    }

    #table-bulk-actions .tba-btn.danger {
      color: #ff3b30;
    }

    #table-bulk-actions .tba-btn.danger:hover {
      background: rgba(255, 59, 48, 0.1);
    }

    /* ─── Поповер над кнопкой массового действия ─── */
    #table-bulk-actions .tba-btn {
      position: relative;
    }

    .tba-popover {
      position: fixed;
      background: #fff;
      border-radius: 12px;
      padding: 12px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
      z-index: 200;
      min-width: 260px;
      display: none;
    }

    .tba-popover.open {
      display: block;
    }

    body.dark .tba-popover,
    body.theme-academy .tba-popover {
      background: #2c2c2e;
      color: #f5f5f7;
    }

    body.theme-neon .tba-popover {
      background: #0f1535;
      color: #e8f0ff;
    }

    .tba-popover .tp-title {
      font-size: 12px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.04em;
      margin-bottom: 8px;
    }

    /* Сетка цветов */
    .tba-popover .tp-colors {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      margin-bottom: 10px;
    }

    .tba-popover .tp-color {
      aspect-ratio: 1;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.1s, border-color 0.15s;
      position: relative;
    }

    .tba-popover .tp-color:hover {
      transform: scale(1.1);
    }

    .tba-popover .tp-color.active {
      border-color: #0071e3;
      box-shadow: 0 0 0 2px #fff inset;
    }

    /* Недавние цвета */
    .tba-popover .tp-recent-label {
      font-size: 11px;
      color: #86868b;
      margin-bottom: 6px;
      margin-top: 12px;
    }

    .tba-popover .tp-recent {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 6px;
      margin-bottom: 10px;
    }

    /* Кастомный выбор цвета */
    .tba-popover .tp-custom-row {
      display: flex;
      align-items: center;
      gap: 8px;
      padding-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      margin-top: 10px;
    }

    body.dark .tba-popover .tp-custom-row,
    body.theme-academy .tba-popover .tp-custom-row {
      border-top-color: rgba(255, 255, 255, 0.1);
    }

    .tba-popover .tp-custom-label {
      font-size: 12px;
      color: #1d1d1f;
      flex: 1;
    }

    body.dark .tba-popover .tp-custom-label,
    body.theme-academy .tba-popover .tp-custom-label {
      color: #f5f5f7;
    }

    .tba-popover input[type="color"] {
      width: 42px;
      height: 32px;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      cursor: pointer;
      background: transparent;
    }

    /* Инпут для тега */
    .tba-popover .tp-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fafafa;
      color: inherit;
      font-family: inherit;
      margin-bottom: 8px;
    }

    .tba-popover .tp-input:focus {
      border-color: #0071e3;
      background: #fff;
    }

    body.dark .tba-popover .tp-input,
    body.theme-academy .tba-popover .tp-input {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    /* Существующие теги — быстрый выбор */
    .tba-popover .tp-suggest {
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      margin-bottom: 8px;
      max-height: 120px;
      overflow-y: auto;
    }

    .tba-popover .tp-suggest-chip {
      padding: 3px 8px;
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
      cursor: pointer;
      border: none;
      font-family: inherit;
      transition: background 0.15s;
    }

    .tba-popover .tp-suggest-chip:hover {
      background: rgba(0, 113, 227, 0.2);
    }

    /* Кнопки действий */
    .tba-popover .tp-actions {
      display: flex;
      gap: 6px;
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    body.dark .tba-popover .tp-actions,
    body.theme-academy .tba-popover .tp-actions {
      border-top-color: rgba(255, 255, 255, 0.1);
    }

    .tba-popover .tp-actions button {
      flex: 1;
      padding: 8px 12px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      background: #f5f5f7;
      color: #1d1d1f;
    }

    .tba-popover .tp-actions button:hover {
      background: #e8e8ed;
    }

    .tba-popover .tp-actions button.primary {
      background: #0071e3;
      color: #fff;
    }

    .tba-popover .tp-actions button.primary:hover {
      background: #0058b0;
    }

    body.dark .tba-popover .tp-actions button,
    body.theme-academy .tba-popover .tp-actions button {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .tba-popover .tp-actions button:hover,
    body.theme-academy .tba-popover .tp-actions button:hover {
      background: #48484a;
    }

    /* Быстрые даты */
    .tba-popover .tp-quick-dates {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
      margin-bottom: 10px;
    }

    .tba-popover .tp-quick-date {
      padding: 8px 10px;
      background: #f5f5f7;
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      font-family: inherit;
      color: #1d1d1f;
      transition: all 0.15s;
    }

    .tba-popover .tp-quick-date:hover {
      background: #e8e8ed;
      border-color: #0071e3;
    }

    body.dark .tba-popover .tp-quick-date,
    body.theme-academy .tba-popover .tp-quick-date {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .tba-popover .tp-quick-date:hover,
    body.theme-academy .tba-popover .tp-quick-date:hover {
      background: #48484a;
    }

    body.dark #table-bulk-actions .tba-btn,
    body.theme-academy #table-bulk-actions .tba-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark #table-bulk-actions .tba-btn:hover,
    body.theme-academy #table-bulk-actions .tba-btn:hover {
      background: #48484a;
    }

    /* ─── Inline-редактирование ячеек ─── */
    /* Дата */
    #table-view .tv-date-input {
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 4px 6px;
      font-size: 12px;
      background: transparent;
      color: inherit;
      font-family: inherit;
      cursor: pointer;
      width: 100%;
      max-width: 130px;
    }

    #table-view .tv-date-input:hover {
      border-color: rgba(0, 0, 0, 0.1);
    }

    #table-view .tv-date-input:focus {
      border-color: #0071e3;
      background: #fff;
      outline: none;
    }

    body.dark #table-view .tv-date-input:focus {
      background: #1c1c1e;
    }

    /* Теги — chip с крестиком */
    #table-view .tv-tag-edit {
      position: relative;
    }

    #table-view .tv-tag .tv-tag-rm {
      opacity: 0;
      margin-left: 2px;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    #table-view .tv-tag:hover .tv-tag-rm {
      opacity: 0.7;
    }

    #table-view .tv-tag .tv-tag-rm:hover {
      opacity: 1;
    }

    #table-view .tv-tag-add {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      background: transparent;
      border: 1px dashed rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      cursor: pointer;
      font-size: 11px;
      color: #86868b;
      transition: all 0.15s;
      padding: 0;
      font-family: inherit;
    }

    #table-view .tv-tag-add:hover {
      border-color: #0071e3;
      color: #0071e3;
      background: rgba(0, 113, 227, 0.08);
    }

    body.dark #table-view .tv-tag-add {
      border-color: rgba(255, 255, 255, 0.2);
    }

    /* Инлайн-инпут для тега */
    #table-view .tv-tag-input {
      width: 70px;
      padding: 2px 6px;
      border: 1px solid #0071e3;
      border-radius: 4px;
      font-size: 10px;
      outline: none;
      background: #fff;
      color: #1d1d1f;
      font-family: inherit;
    }

    body.dark #table-view .tv-tag-input {
      background: #1c1c1e;
      color: #f5f5f7;
    }

    /* Прогресс — клик для редактирования */
    #table-view .tv-progress-wrap.editable {
      cursor: pointer;
      padding: 4px;
      margin: -4px;
      border-radius: 6px;
      transition: background 0.15s;
    }

    #table-view .tv-progress-wrap.editable:hover {
      background: rgba(0, 113, 227, 0.06);
    }

    #table-view .tv-progress-edit {
      width: 60px;
      padding: 2px 4px;
      border: 1px solid #0071e3;
      border-radius: 4px;
      font-size: 11px;
      outline: none;
      background: #fff;
      color: #1d1d1f;
      font-family: inherit;
      text-align: center;
    }

    body.dark #table-view .tv-progress-edit {
      background: #1c1c1e;
      color: #f5f5f7;
    }

    /* ─── Группировка ─── */
    #table-view tbody tr.group-header {
      background: #f0f0f3 !important;
      cursor: pointer;
      font-weight: 600;
      border-top: 2px solid rgba(0, 0, 0, 0.08);
    }

    #table-view tbody tr.group-header:hover {
      background: #e8e8ed !important;
    }

    body.dark #table-view tbody tr.group-header,
    body.theme-academy #table-view tbody tr.group-header {
      background: #3a3a3c !important;
      border-top-color: rgba(255, 255, 255, 0.1);
    }

    body.dark #table-view tbody tr.group-header:hover,
    body.theme-academy #table-view tbody tr.group-header:hover {
      background: #48484a !important;
    }

    body.theme-neon #table-view tbody tr.group-header {
      background: #1a1f45 !important;
      border-top-color: rgba(0, 240, 255, 0.2);
    }

    #table-view .group-header td {
      padding: 12px 14px;
    }

    #table-view .group-header .group-icon {
      display: inline-block;
      margin-right: 6px;
      transition: transform 0.2s;
      font-size: 10px;
      color: #86868b;
    }

    #table-view .group-header.collapsed .group-icon {
      transform: rotate(-90deg);
    }

    #table-view .group-header .group-count {
      font-size: 11px;
      color: #86868b;
      font-weight: 400;
      margin-left: 8px;
    }

    /* Селектор группировки */
    .tv-group-select {
      padding: 6px 10px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 12px;
      background: #fff;
      color: inherit;
      font-family: inherit;
      cursor: pointer;
      outline: none;
    }

    .tv-group-select:focus {
      border-color: #0071e3;
    }

    body.dark .tv-group-select,
    body.theme-academy .tv-group-select {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.theme-neon .tv-group-select {
      background: #1a1f45;
      border-color: #2d3a6a;
      color: #e8f0ff;
    }

    /* ─── Кнопка "Сбросить фильтры" ─── */
    #tv-btn-reset-filters {
      display: none;
    }

    #tv-btn-reset-filters.show {
      display: inline-flex;
    }

    /* ───────── [STYLES: presentation] Презентация карты ───────── */
    #presentation {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.94);
      z-index: 4000;
      display: none;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 60px 80px;
    }

    #presentation.open {
      display: flex;
    }

    .pres-stage {
      flex: 1;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 30px;
    }

    .pres-card {
      background: #ffffff;
      color: #1d1d1f;
      border-radius: 20px;
      padding: 48px 56px;
      max-width: 900px;
      width: 100%;
      max-height: 70vh;
      overflow-y: auto;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
      font-size: 18px;
      line-height: 1.6;
      animation: presCardIn 0.3s ease-out;
    }

    @keyframes presCardIn {
      0% {
        opacity: 0;
        transform: scale(0.96);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    .pres-card .pres-title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.2;
      word-wrap: break-word;
    }

    .pres-card .pres-body {
      font-size: 18px;
      line-height: 1.6;
      margin-bottom: 20px;
      color: inherit;
      word-wrap: break-word;
    }

    .pres-card .pres-body p {
      margin: 0 0 12px;
    }

    .pres-card .pres-body h1 {
      font-size: 1.6em;
      margin: 16px 0 10px;
      font-weight: 700;
    }

    .pres-card .pres-body h2 {
      font-size: 1.4em;
      margin: 14px 0 8px;
      font-weight: 700;
    }

    .pres-card .pres-body h3 {
      font-size: 1.2em;
      margin: 12px 0 6px;
      font-weight: 700;
    }

    .pres-card .pres-body strong {
      font-weight: 700;
    }

    .pres-card .pres-body em {
      font-style: italic;
    }

    .pres-card .pres-body code {
      background: rgba(0, 0, 0, 0.08);
      padding: 2px 6px;
      border-radius: 4px;
      font-family: "SF Mono", Monaco, monospace;
      font-size: 0.9em;
    }

    .pres-card .pres-body a {
      color: #0071e3;
      text-decoration: none;
      border-bottom: 1px solid rgba(0, 113, 227, 0.3);
    }

    .pres-card .pres-body ul,
    .pres-card .pres-body ol {
      margin: 8px 0 12px;
      padding-left: 28px;
    }

    .pres-card .pres-body li {
      margin: 4px 0;
    }

    .pres-card .pres-body blockquote {
      border-left: 4px solid rgba(0, 0, 0, 0.2);
      padding: 4px 0 4px 14px;
      margin: 8px 0;
      opacity: 0.85;
      font-style: italic;
    }

    .pres-card .pres-body hr {
      border: none;
      border-top: 1px solid rgba(0, 0, 0, 0.15);
      margin: 16px 0;
    }

    .pres-card img {
      max-width: 100%;
      max-height: 50vh;
      border-radius: 12px;
      display: block;
      margin: 20px auto;
      object-fit: contain;
    }

    .pres-card .pres-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 16px 0;
    }

    .pres-card .pres-tag {
      font-size: 13px;
      font-weight: 500;
      padding: 4px 10px;
      background: rgba(0, 113, 227, 0.12);
      color: #0071e3;
      border-radius: 6px;
    }

    .pres-card .pres-badges {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 16px;
      font-size: 14px;
      opacity: 0.75;
    }

    .pres-card .pres-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .pres-card .pres-links {
      margin-top: 24px;
      padding-top: 20px;
      border-top: 1px solid rgba(0, 0, 0, 0.1);
      font-size: 14px;
      opacity: 0.75;
    }

    .pres-card .pres-links-title {
      font-weight: 600;
      margin-bottom: 8px;
      opacity: 0.65;
      text-transform: uppercase;
      font-size: 11px;
      letter-spacing: 0.05em;
    }

    .pres-card .pres-link-item {
      display: inline-block;
      padding: 3px 10px;
      margin: 3px 4px 3px 0;
      background: rgba(0, 0, 0, 0.06);
      border-radius: 6px;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .pres-card .pres-link-item:hover {
      background: rgba(0, 113, 227, 0.15);
      color: #0071e3;
    }

    .pres-nav {
      display: flex;
      align-items: center;
      gap: 24px;
      flex-shrink: 0;
    }

    .pres-arrow {
      width: 56px;
      height: 56px;
      border: none;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
      font-size: 28px;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, transform 0.15s;
      padding-bottom: 4px;
    }

    .pres-arrow:hover {
      background: rgba(255, 255, 255, 0.22);
      transform: scale(1.05);
    }

    .pres-arrow:disabled {
      opacity: 0.25;
      cursor: default;
    }

    .pres-arrow:disabled:hover {
      transform: none;
      background: rgba(255, 255, 255, 0.12);
    }

    .pres-counter {
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      opacity: 0.85;
      min-width: 80px;
      text-align: center;
    }

    .pres-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 44px;
      height: 44px;
      border: none;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      border-radius: 50%;
      cursor: pointer;
      font-size: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }

    .pres-close:hover {
      background: rgba(255, 255, 255, 0.25);
    }

    /* Тёмная тема карты (презентация всегда светлая — контраст) */
    /* Здесь ничего не меняем, презентация всегда на тёмном фоне + белые карточки */


    /* ───────── [STYLES: ctx-menu] Контекстное меню ───────── */
    #ctx-menu {
      position: fixed;
      z-index: 3000;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
      min-width: 240px;
      display: none;
    }

    #ctx-menu.open {
      display: block;
    }

    #ctx-menu .item {
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
      color: #1d1d1f;
    }

    #ctx-menu .item:hover {
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
    }

    #ctx-menu .item.danger:hover {
      background: rgba(255, 59, 48, 0.1);
      color: #ff3b30;
    }

    #ctx-menu .item.warn:hover {
      background: rgba(255, 149, 0, 0.15);
      color: #ff9500;
    }

    #ctx-menu .sep {
      height: 1px;
      background: rgba(0, 0, 0, 0.08);
      margin: 4px 8px;
    }

    #ctx-menu .shortcut {
      margin-left: auto;
      font-size: 11px;
      color: #86868b;
    }

    /* ───────── [STYLES: misc] Прочее ───────── */
    #hint {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.75);
      color: #fff;
      padding: 10px 18px;
      border-radius: 10px;
      font-size: 13px;
      z-index: 1000;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      transition: opacity 0.3s;
      pointer-events: none;
    }

    #hint.hidden {
      opacity: 0;
    }

    #zoom-indicator {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 6px 12px;
      border-radius: 8px;
      font-size: 12px;
      color: #86868b;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
      z-index: 1000;
    }

    #project-name {
      position: fixed;
      top: 22px;
      left: 20px;
      font-size: 15px;
      font-weight: 600;
      color: #1d1d1f;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      padding: 8px 14px;
      border-radius: 10px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
      cursor: pointer;
      max-width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #project-name:hover {
      background: #fff;
    }

    /* ───────── [STYLES: product-tour] Интерактивное обучение ───────── */
    #tutorial-spotlight {
      position: fixed;
      z-index: 11999;
      pointer-events: none;
      border: 2px solid #f4a261;
      border-radius: 12px;
      box-shadow: 0 0 0 9999px rgba(35, 28, 24, .62), 0 0 0 5px rgba(244, 162, 97, .2);
      transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease;
    }

    #tutorial-popover {
      position: fixed;
      z-index: 12000;
      width: min(390px, calc(100vw - 24px));
      max-height: min(80vh, 560px);
      overflow-y: auto;
      box-sizing: border-box;
      padding: 20px;
      border: 1px solid rgba(86, 77, 67, .16);
      border-radius: 18px;
      background: #fffdf9;
      color: #292722;
      box-shadow: 0 18px 60px rgba(22, 18, 14, .25);
      font-family: inherit;
    }

    #tutorial-popover[hidden], #tutorial-spotlight[hidden] { display: none; }
    .tutorial-topline, .tutorial-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .tutorial-topline > span { color: #a46136; font-size: 11px; font-weight: 800; letter-spacing: .1em; }
    #tutorial-close { border: 0; background: transparent; color: #827c73; font-size: 25px; cursor: pointer; line-height: 1; }
    .tutorial-progress { height: 5px; margin: 10px 0 13px; overflow: hidden; border-radius: 8px; background: #eee8df; }
    #tutorial-progress-bar { display: block; width: 0; height: 100%; border-radius: inherit; background: #d98d58; transition: width .2s ease; }
    #tutorial-counter { color: #898278; font-size: 12px; }
    #tutorial-title { margin: 7px 0 8px; font-size: 21px; line-height: 1.2; }
    #tutorial-description { margin: 0; color: #605c54; font-size: 14px; line-height: 1.55; }
    .tutorial-auto-option { display: flex; align-items: flex-start; gap: 8px; margin-top: 16px; color: #716b61; font-size: 12px; line-height: 1.4; }
    .tutorial-auto-option input, .tutorial-preferences input { accent-color: #c57b4a; }
    .tutorial-actions { margin-top: 18px; }
    .tutorial-actions > div { display: flex; gap: 7px; }
    .tutorial-actions button { min-height: 36px; padding: 7px 11px; border: 1px solid #e6ded4; border-radius: 9px; background: #fff; color: #514b43; font: inherit; font-size: 12px; cursor: pointer; }
    .tutorial-actions button:disabled { opacity: .45; cursor: default; }
    .tutorial-actions .tutorial-next { border-color: #c57b4a; background: #c57b4a; color: white; font-weight: 700; }
    .tutorial-preferences { display: grid; gap: 9px; margin-top: 12px; color: #6e685f; font-size: 12px; line-height: 1.45; }
    .tutorial-preferences label { display: flex; gap: 8px; align-items: flex-start; }
    .tutorial-preferences .lp-btn { justify-self: start; }
    .language-switcher { min-height: 36px; min-width: 62px; padding: 0 13px; border: 1px solid rgba(112, 98, 81, .24); border-radius: 10px; background: rgba(255, 253, 249, .9); color: #514b43; font: 700 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
    .editor-language-switcher { position: fixed; z-index: 1100; top: calc(16px + env(safe-area-inset-top)); right: calc(16px + env(safe-area-inset-right)); min-height: 34px; min-width: 66px; padding: 0 16px 0 12px; }
    body.dark .language-switcher { border-color: #55545a; background: #313133; color: #f1eee8; }
    body.dark #tutorial-popover { border-color: #414143; background: #252527; color: #f4f1eb; }
    body.dark #tutorial-description, body.dark .tutorial-auto-option { color: #c1bbb2; }
    body.dark .tutorial-actions button { border-color: #49484a; background: #313133; color: #eee; }
    body.dark .tutorial-actions .tutorial-next { border-color: #c57b4a; background: #c57b4a; }
    @media (max-width: 600px) {
      #tutorial-popover { padding: 16px; border-radius: 15px; }
      #tutorial-title { font-size: 19px; }
      #tutorial-description { font-size: 13px; }
      .editor-language-switcher { top: calc(9px + env(safe-area-inset-top)); right: calc(9px + env(safe-area-inset-right)); min-height: 32px; }
    }


    /* ───────── [STYLES: animations] Анимации ───────── */
    /* Появление ноды */
    .node.node-appear {
      animation: nodeAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes nodeAppear {
      0% {
        opacity: 0;
        transform: scale(0.85);
      }

      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    /* Подсветка при создании */
    .node.node-flash {
      animation: nodeFlash 1s ease-out;
    }

    @keyframes nodeFlash {
      0% {
        box-shadow: 0 0 0 2px #0071e3, 0 0 20px rgba(0, 113, 227, 0.6);
      }

      100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
      }
    }

    /* Исчезновение */
    .node.node-removing {
      opacity: 0;
      transform: scale(0.85);
      pointer-events: none;
    }

    /* Появление линии (SVG path) */
    #svg path.edge-appear {
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      animation: edgeDraw 0.4s ease-out forwards;
    }

    @keyframes edgeDraw {
      to {
        stroke-dashoffset: 0;
      }
    }

    /* Отключить всё, если анимации выключены */
    body.animations-off .node,
    body.animations-off #svg path,
    body.animations-off #left-panel,
    body.animations-off #side-panel,
    body.animations-off .modal-box {
      animation: none !important;
      transition: none !important;
    }

    body.animations-off .node.node-appear,
    body.animations-off .node.node-flash {
      animation: none !important;
    }

    body.animations-off .node.node-removing {
      opacity: 1 !important;
      transform: none !important;
    }

    /* Плавная подъездка (zoom to fit и другие transform) */
    body.animations-on #canvas {
      transition: transform 0.3s ease-out;
    }

    body.animations-on.no-transition #canvas {
      transition: none !important;
    }


    /* ───────── [STYLES: dark-theme] Тёмная тема ───────── */
    body.dark {
      background: #1c1c1e;
      color: #f5f5f7;
    }

    body.dark #editor {
      background: #1c1c1e;
    }

    body.dark #canvas-wrapper {
      background-color: #1c1c1e;
      background-image: radial-gradient(circle, rgba(255, 255, 255, 0.14) 1px, transparent 1px);
    }

    body.dark .node {
      background: #2c2c2e;
      color: #f5f5f7;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
    }

    body.dark .node:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1);
    }

    body.dark #toolbar,
    body.dark #side-panel,
    body.dark #minimap,
    body.dark #project-name,
    body.dark #zoom-indicator,
    body.dark #search-box,
    body.dark #ctx-menu,
    body.dark .home-btn {
      background: rgba(40, 40, 42, 0.95);
      color: #f5f5f7;
    }

    body.dark .btn {
      color: #f5f5f7;
    }

    body.dark .btn:hover {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark .shape-btn,
    body.dark .size-btn,
    body.dark .align-btn,
    body.dark .panel-btn,
    body.dark .thickness-btn,
    body.dark .type-btn,
    body.dark .font-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .shape-btn:hover,
    body.dark .size-btn:hover,
    body.dark .align-btn:hover,
    body.dark .panel-btn:hover,
    body.dark .thickness-btn:hover,
    body.dark .type-btn:hover,
    body.dark .font-btn:hover {
      background: #48484a;
    }

    body.dark .thickness-btn .line {
      background: #f5f5f7;
    }

    body.dark .project-card {
      background: #2c2c2e;
    }

    body.dark #home h1 {
      color: #f5f5f7;
    }

    body.dark .new-card {
      border-color: #48484a;
    }

    body.dark #ctx-menu .item {
      color: #f5f5f7;
    }

    body.dark #ctx-menu .item:hover {
      background: rgba(0, 113, 227, 0.25);
    }

    body.dark .tag-input-row input,
    body.dark .url-input {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.dark .node-tag {
      background: rgba(255, 255, 255, 0.12);
    }

    /* ───────── [STYLES: tag-autocomplete] Автокомплит тегов ───────── */
    /* Выпадашка, которая появляется под полем ввода тега.
       Позиционируется абсолютно, привязана к input-полю. */
    .tag-autocomplete {
      position: fixed;
      z-index: 9500;
      /* выше tba-popover (9000), ниже модалок (5000)... стоп, модалки ниже. ок */
      min-width: 240px;
      max-width: 380px;
      max-height: 340px;
      overflow: hidden;
      display: none;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .tag-autocomplete.open {
      display: flex;
    }

    /* ─── Заголовок секции ─── */
    .tag-autocomplete .ta-section-title {
      font-size: 10px;
      font-weight: 600;
      color: #86868b;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      padding: 8px 12px 4px;
      user-select: none;
    }

    /* ─── Список ─── */
    .tag-autocomplete .ta-list {
      overflow-y: auto;
      padding: 4px 6px 8px;
      flex: 1;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
    }

    .tag-autocomplete .ta-list::-webkit-scrollbar {
      width: 6px;
    }

    .tag-autocomplete .ta-list::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }

    /* ─── Разделитель между секциями ─── */
    .tag-autocomplete .ta-sep {
      height: 1px;
      background: rgba(0, 0, 0, 0.06);
      margin: 4px 8px;
    }

    /* ─── Строка тега ─── */
    .tag-autocomplete .ta-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 7px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      transition: background 0.1s;
      user-select: none;
    }

    .tag-autocomplete .ta-item:hover,
    .tag-autocomplete .ta-item.active {
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
    }

    .tag-autocomplete .ta-item .ta-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
    }

    .tag-autocomplete .ta-item .ta-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .tag-autocomplete .ta-item .ta-name b {
      font-weight: 700;
      color: inherit;
    }

    .tag-autocomplete .ta-item .ta-count {
      font-size: 11px;
      color: #86868b;
      font-weight: 500;
      font-variant-numeric: tabular-nums;
      flex-shrink: 0;
    }

    .tag-autocomplete .ta-item.active .ta-count,
    .tag-autocomplete .ta-item:hover .ta-count {
      color: inherit;
      opacity: 0.7;
    }

    /* ─── Иконка 📌 для закреплённых ─── */
    .tag-autocomplete .ta-item .ta-pin {
      font-size: 10px;
      opacity: 0.6;
      flex-shrink: 0;
    }

    /* ─── Строка «слова из нод» ─── */
    .tag-autocomplete .ta-item-word .ta-word-icon {
      font-size: 13px;
      flex-shrink: 0;
      opacity: 0.85;
    }

    .tag-autocomplete .ta-item-word {
      /* Слегка другой фон — чтобы визуально отличать от тегов */
      font-style: normal;
    }

    .tag-autocomplete .ta-item-word .ta-name {
      color: inherit;
      opacity: 0.9;
    }

    /* ─── Кнопка "создать новый" ─── */
    .tag-autocomplete .ta-create {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 7px;
      cursor: pointer;
      font-size: 13px;
      color: #34c759;
      font-weight: 500;
      transition: background 0.1s;
      user-select: none;
    }

    .tag-autocomplete .ta-create:hover,
    .tag-autocomplete .ta-create.active {
      background: rgba(52, 199, 89, 0.12);
    }

    .tag-autocomplete .ta-create .ta-create-icon {
      font-size: 14px;
      flex-shrink: 0;
    }

    .tag-autocomplete .ta-create .ta-create-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ─── Предупреждение о похожем теге ─── */
    .tag-autocomplete .ta-warn {
      font-size: 11px;
      color: #ff9500;
      padding: 4px 12px 8px;
      line-height: 1.3;
    }

    /* ─── Пусто ─── */
    .tag-autocomplete .ta-empty {
      padding: 12px;
      text-align: center;
      font-size: 12px;
      color: #86868b;
      font-style: italic;
    }

    /* ─── Тёмная тема ─── */
    body.dark .tag-autocomplete,
    body.theme-academy .tag-autocomplete {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    body.dark .tag-autocomplete .ta-item,
    body.theme-academy .tag-autocomplete .ta-item {
      color: #f5f5f7;
    }

    body.dark .tag-autocomplete .ta-item:hover,
    body.dark .tag-autocomplete .ta-item.active,
    body.theme-academy .tag-autocomplete .ta-item:hover,
    body.theme-academy .tag-autocomplete .ta-item.active {
      background: rgba(0, 113, 227, 0.25);
    }

    body.dark .tag-autocomplete .ta-sep,
    body.theme-academy .tag-autocomplete .ta-sep {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark .tag-autocomplete .ta-count,
    body.theme-academy .tag-autocomplete .ta-count {
      color: #a1a1a6;
    }

    /* 🌊 Неон */
    body.theme-neon .tag-autocomplete {
      background: rgba(10, 14, 39, 0.98);
      color: #e8f0ff;
    }

    body.theme-neon .tag-autocomplete .ta-item {
      color: #e8f0ff;
    }

    body.theme-neon .tag-autocomplete .ta-item:hover,
    body.theme-neon .tag-autocomplete .ta-item.active {
      background: rgba(0, 240, 255, 0.15);
      color: #00f0ff;
    }

    body.theme-neon .tag-autocomplete .ta-sep {
      background: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .tag-autocomplete .ta-count {
      color: #8a9bc7;
    }

    /* ───────── [STYLES: all-tags-popover] Все теги карты (Ctrl+Shift+T) ───────── */
    .all-tags-popover {
      position: fixed;
      z-index: 9550;
      min-width: 320px;
      max-width: 460px;
      max-height: 70vh;
      display: flex;
      flex-direction: column;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 14px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.08);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .all-tags-popover .atp-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 14px 16px 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .all-tags-popover .atp-title {
      font-size: 14px;
      font-weight: 700;
      color: #1d1d1f;
    }

    .all-tags-popover .atp-count {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      background: rgba(0, 0, 0, 0.06);
      padding: 2px 8px;
      border-radius: 10px;
    }

    .all-tags-popover .atp-search {
      padding: 10px 16px 6px;
    }

    .all-tags-popover .atp-search-input {
      width: 100%;
      padding: 8px 12px;
      border: 1px solid #e0e0e0;
      border-radius: 8px;
      font-size: 13px;
      outline: none;
      background: #fafafa;
      color: inherit;
      font-family: inherit;
    }

    .all-tags-popover .atp-search-input:focus {
      border-color: #0071e3;
      background: #fff;
    }

    .all-tags-popover .atp-list {
      flex: 1;
      overflow-y: auto;
      padding: 6px 8px 8px;
      scrollbar-width: thin;
      scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
      max-height: 50vh;
    }

    .all-tags-popover .atp-list::-webkit-scrollbar {
      width: 6px;
    }

    .all-tags-popover .atp-list::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 3px;
    }

    .all-tags-popover .atp-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      transition: background 0.1s;
      user-select: none;
    }

    .all-tags-popover .atp-row:hover {
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
    }

    .all-tags-popover .atp-dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
    }

    .all-tags-popover .atp-name {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 500;
    }

    .all-tags-popover .atp-pin {
      font-size: 11px;
      opacity: 0.7;
      flex-shrink: 0;
    }

    .all-tags-popover .atp-cnt {
      font-size: 11px;
      font-weight: 600;
      color: #86868b;
      background: rgba(0, 0, 0, 0.05);
      padding: 2px 8px;
      border-radius: 8px;
      flex-shrink: 0;
      font-variant-numeric: tabular-nums;
    }

    .all-tags-popover .atp-row:hover .atp-cnt {
      color: inherit;
      opacity: 0.8;
    }

    .all-tags-popover .atp-empty {
      padding: 30px 16px;
      text-align: center;
      font-size: 13px;
      color: #86868b;
      font-style: italic;
    }

    .all-tags-popover .atp-footer {
      padding: 8px 16px 14px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .all-tags-popover .atp-btn {
      width: 100%;
      padding: 8px 12px;
      background: #f5f5f7;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 12px;
      font-weight: 500;
      color: #1d1d1f;
      font-family: inherit;
      transition: background 0.15s;
    }

    .all-tags-popover .atp-btn:hover {
      background: #e8e8ed;
    }

    /* ─── Тёмные темы ─── */
    body.dark .all-tags-popover,
    body.theme-academy .all-tags-popover {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    body.dark .all-tags-popover .atp-header,
    body.theme-academy .all-tags-popover .atp-header {
      border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    body.dark .all-tags-popover .atp-title,
    body.theme-academy .all-tags-popover .atp-title {
      color: #f5f5f7;
    }

    body.dark .all-tags-popover .atp-search-input,
    body.theme-academy .all-tags-popover .atp-search-input {
      background: #3a3a3c;
      border-color: #48484a;
      color: #f5f5f7;
    }

    body.dark .all-tags-popover .atp-row,
    body.theme-academy .all-tags-popover .atp-row {
      color: #f5f5f7;
    }

    body.dark .all-tags-popover .atp-row:hover,
    body.theme-academy .all-tags-popover .atp-row:hover {
      background: rgba(0, 113, 227, 0.25);
    }

    body.dark .all-tags-popover .atp-cnt,
    body.theme-academy .all-tags-popover .atp-cnt {
      color: #a1a1a6;
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark .all-tags-popover .atp-footer,
    body.theme-academy .all-tags-popover .atp-footer {
      border-top-color: rgba(255, 255, 255, 0.08);
    }

    body.dark .all-tags-popover .atp-btn,
    body.theme-academy .all-tags-popover .atp-btn {
      background: #3a3a3c;
      color: #f5f5f7;
    }

    body.dark .all-tags-popover .atp-btn:hover,
    body.theme-academy .all-tags-popover .atp-btn:hover {
      background: #48484a;
    }

    /* 🌊 Неон */
    body.theme-neon .all-tags-popover {
      background: rgba(10, 14, 39, 0.98);
      color: #e8f0ff;
    }

    body.theme-neon .all-tags-popover .atp-header {
      border-bottom-color: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .all-tags-popover .atp-title {
      color: #e8f0ff;
    }

    body.theme-neon .all-tags-popover .atp-search-input {
      background: #1a1f45;
      border-color: #2d3a6a;
      color: #e8f0ff;
    }

    body.theme-neon .all-tags-popover .atp-row {
      color: #e8f0ff;
    }

    body.theme-neon .all-tags-popover .atp-row:hover {
      background: rgba(0, 240, 255, 0.15);
      color: #00f0ff;
    }

    body.theme-neon .all-tags-popover .atp-cnt {
      color: #8a9bc7;
      background: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .all-tags-popover .atp-footer {
      border-top-color: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .all-tags-popover .atp-btn {
      background: #1a1f45;
      color: #e8f0ff;
    }

    body.theme-neon .all-tags-popover .atp-btn:hover {
      background: #232a5c;
    }

    /* ─── Секция-группа в автокомплите ─── */
    .tag-autocomplete .ta-section-title.ta-section-group {
      /* Иконка группы в заголовке — чуть ярче обычных */
      color: #1d1d1f;
      font-weight: 600;
      opacity: 0.9;
    }

    body.dark .tag-autocomplete .ta-section-title.ta-section-group,
    body.theme-academy .tag-autocomplete .ta-section-title.ta-section-group {
      color: #f5f5f7;
    }

    body.theme-neon .tag-autocomplete .ta-section-title.ta-section-group {
      color: #e8f0ff;
    }

    /* ───────── [STYLES: tag-ctx-menu] Контекстное меню тега ───────── */
    .tag-ctx-menu {
      position: fixed;
      z-index: 9600;
      min-width: 180px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .tag-ctx-menu .tag-ctx-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      transition: background 0.1s;
      user-select: none;
    }

    .tag-ctx-menu .tag-ctx-item:hover {
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
    }

    .tag-ctx-menu .tag-ctx-item.danger {
      color: #ff3b30;
    }

    .tag-ctx-menu .tag-ctx-item.danger:hover {
      background: rgba(255, 59, 48, 0.1);
      color: #ff3b30;
    }

    .tag-ctx-menu .tag-ctx-icon {
      font-size: 14px;
      flex-shrink: 0;
      width: 18px;
      text-align: center;
    }

    .tag-ctx-menu .tag-ctx-label {
      flex: 1;
    }

    .tag-ctx-menu .tag-ctx-sep {
      height: 1px;
      background: rgba(0, 0, 0, 0.08);
      margin: 4px 8px;
    }

    body.dark .tag-ctx-menu,
    body.theme-academy .tag-ctx-menu {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    body.dark .tag-ctx-menu .tag-ctx-item,
    body.theme-academy .tag-ctx-menu .tag-ctx-item {
      color: #f5f5f7;
    }

    body.dark .tag-ctx-menu .tag-ctx-item:hover,
    body.theme-academy .tag-ctx-menu .tag-ctx-item:hover {
      background: rgba(0, 113, 227, 0.25);
    }

    body.dark .tag-ctx-menu .tag-ctx-sep,
    body.theme-academy .tag-ctx-menu .tag-ctx-sep {
      background: rgba(255, 255, 255, 0.08);
    }

    body.theme-neon .tag-ctx-menu {
      background: rgba(10, 14, 39, 0.98);
      color: #e8f0ff;
    }

    body.theme-neon .tag-ctx-menu .tag-ctx-item {
      color: #e8f0ff;
    }

    body.theme-neon .tag-ctx-menu .tag-ctx-item:hover {
      background: rgba(0, 240, 255, 0.15);
      color: #00f0ff;
    }

    body.theme-neon .tag-ctx-menu .tag-ctx-sep {
      background: rgba(0, 240, 255, 0.1);
    }

    /* ───────── [STYLES: tag-color-picker] Палитра цветов тега ───────── */
    .tag-color-picker {
      position: fixed;
      z-index: 9700;
      min-width: 240px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 12px;
      padding: 10px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .tag-color-picker .tcp-header {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 4px 10px;
      font-size: 12px;
      color: #86868b;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      margin-bottom: 10px;
      user-select: none;
    }

    .tag-color-picker .tcp-header-icon {
      font-size: 14px;
    }

    .tag-color-picker .tcp-header-title b {
      color: #1d1d1f;
      font-weight: 600;
    }

    .tag-color-picker .tcp-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-bottom: 10px;
    }

    .tag-color-picker .tcp-swatch {
      aspect-ratio: 1;
      border: 2px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      padding: 0;
      transition: transform 0.1s, border-color 0.15s;
      position: relative;
    }

    .tag-color-picker .tcp-swatch:hover {
      transform: scale(1.1);
    }

    .tag-color-picker .tcp-swatch.active {
      border-color: #1d1d1f;
      box-shadow: 0 0 0 2px #fff inset;
    }

    .tag-color-picker .tcp-swatch.active::after {
      content: '✓';
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    }

    .tag-color-picker .tcp-sep {
      height: 1px;
      background: rgba(0, 0, 0, 0.06);
      margin: 4px 0 10px;
    }

    .tag-color-picker .tcp-auto {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: rgba(0, 0, 0, 0.03);
      border: 1px solid transparent;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 13px;
      color: #1d1d1f;
      text-align: left;
      margin-bottom: 8px;
      transition: background 0.15s;
    }

    .tag-color-picker .tcp-auto:hover {
      background: rgba(0, 113, 227, 0.08);
    }

    .tag-color-picker .tcp-auto.active {
      background: rgba(0, 113, 227, 0.12);
      border-color: rgba(0, 113, 227, 0.3);
    }

    .tag-color-picker .tcp-auto-icon {
      font-size: 14px;
    }

    .tag-color-picker .tcp-auto-label {
      flex: 1;
      font-weight: 500;
    }

    .tag-color-picker .tcp-auto-hint {
      font-size: 11px;
      color: #86868b;
    }

    .tag-color-picker .tcp-custom-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }

    .tag-color-picker .tcp-custom-label {
      flex: 1;
      font-size: 12px;
      color: #1d1d1f;
    }

    .tag-color-picker .tcp-custom-row input[type="color"] {
      width: 44px;
      height: 30px;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      cursor: pointer;
      background: transparent;
    }

    /* ─── Тёмная тема ─── */
    body.dark .tag-color-picker,
    body.theme-academy .tag-color-picker {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    body.dark .tag-color-picker .tcp-header-title b,
    body.theme-academy .tag-color-picker .tcp-header-title b,
    body.dark .tag-color-picker .tcp-auto,
    body.theme-academy .tag-color-picker .tcp-auto,
    body.dark .tag-color-picker .tcp-custom-label,
    body.theme-academy .tag-color-picker .tcp-custom-label {
      color: #f5f5f7;
    }

    body.dark .tag-color-picker .tcp-header,
    body.theme-academy .tag-color-picker .tcp-header,
    body.dark .tag-color-picker .tcp-sep,
    body.theme-academy .tag-color-picker .tcp-sep,
    body.dark .tag-color-picker .tcp-custom-row,
    body.theme-academy .tag-color-picker .tcp-custom-row {
      border-color: rgba(255, 255, 255, 0.08);
    }

    body.dark .tag-color-picker .tcp-sep,
    body.theme-academy .tag-color-picker .tcp-sep {
      background: rgba(255, 255, 255, 0.08);
    }

    body.dark .tag-color-picker .tcp-auto,
    body.theme-academy .tag-color-picker .tcp-auto {
      background: rgba(255, 255, 255, 0.05);
    }

    body.dark .tag-color-picker .tcp-swatch.active,
    body.theme-academy .tag-color-picker .tcp-swatch.active {
      border-color: #f5f5f7;
    }

    /* ─── Неон ─── */
    body.theme-neon .tag-color-picker {
      background: rgba(10, 14, 39, 0.98);
      color: #e8f0ff;
    }

    body.theme-neon .tag-color-picker .tcp-header-title b,
    body.theme-neon .tag-color-picker .tcp-auto,
    body.theme-neon .tag-color-picker .tcp-custom-label {
      color: #e8f0ff;
    }

    body.theme-neon .tag-color-picker .tcp-header,
    body.theme-neon .tag-color-picker .tcp-sep,
    body.theme-neon .tag-color-picker .tcp-custom-row {
      border-color: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .tag-color-picker .tcp-sep {
      background: rgba(0, 240, 255, 0.1);
    }

    body.theme-neon .tag-color-picker .tcp-auto {
      background: rgba(0, 240, 255, 0.05);
    }

    /* ───────── [STYLES: tag-ctx-menu] Контекстное меню тега ───────── */
    .tag-ctx-menu {
      position: fixed;
      z-index: 9600;
      min-width: 180px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-radius: 10px;
      padding: 4px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.06);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .tag-ctx-menu .tag-ctx-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 13px;
      color: #1d1d1f;
      transition: background 0.1s;
      user-select: none;
    }

    .tag-ctx-menu .tag-ctx-item:hover {
      background: rgba(0, 113, 227, 0.1);
      color: #0071e3;
    }

    .tag-ctx-menu .tag-ctx-item.danger {
      color: #ff3b30;
    }

    .tag-ctx-menu .tag-ctx-item.danger:hover {
      background: rgba(255, 59, 48, 0.1);
      color: #ff3b30;
    }

    .tag-ctx-menu .tag-ctx-icon {
      font-size: 14px;
      flex-shrink: 0;
      width: 18px;
      text-align: center;
    }

    .tag-ctx-menu .tag-ctx-label {
      flex: 1;
    }

    .tag-ctx-menu .tag-ctx-sep {
      height: 1px;
      background: rgba(0, 0, 0, 0.08);
      margin: 4px 8px;
    }

    /* Тёмная тема */
    body.dark .tag-ctx-menu,
    body.theme-academy .tag-ctx-menu {
      background: rgba(40, 40, 42, 0.98);
      color: #f5f5f7;
    }

    body.dark .tag-ctx-menu .tag-ctx-item,
    body.theme-academy .tag-ctx-menu .tag-ctx-item {
      color: #f5f5f7;
    }

    body.dark .tag-ctx-menu .tag-ctx-item:hover,
    body.theme-academy .tag-ctx-menu .tag-ctx-item:hover {
      background: rgba(0, 113, 227, 0.25);
    }

    body.dark .tag-ctx-menu .tag-ctx-sep,
    body.theme-academy .tag-ctx-menu .tag-ctx-sep {
      background: rgba(255, 255, 255, 0.08);
    }

    /* 🌊 Неон */
    body.theme-neon .tag-ctx-menu {
      background: rgba(10, 14, 39, 0.98);
      color: #e8f0ff;
    }

    body.theme-neon .tag-ctx-menu .tag-ctx-item {
      color: #e8f0ff;
    }

    body.theme-neon .tag-ctx-menu .tag-ctx-item:hover {
      background: rgba(0, 240, 255, 0.15);
      color: #00f0ff;
    }

    body.theme-neon .tag-ctx-menu .tag-ctx-sep {
      background: rgba(0, 240, 255, 0.1);
    }



    /* ───────── [STYLES: tag-chips-colored] Цветные чипы тегов в нодах ───────── */
    /* Обновлённые стили для .node-tag — цвет задаётся inline через JS.
       Здесь только базовый каркас и fallback. */
    .node-tag {
      /* Цвет задаётся через style: background, color */
      /* box-shadow лёгкий для отличия от фона */
      box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
    }

    body.dark .node-tag {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    }




    /* ───────── [STYLES: card-themes] Темы карт ───────── */
    /* Тема применяется через body.theme-XXX */
    /* Базовая светлая — как сейчас */

    /* 🌊 Неон */
    body.theme-neon #canvas-wrapper {
      background-color: #0a0e27;
      background-image: radial-gradient(circle, rgba(0, 240, 255, 0.25) 1px, transparent 1px);
    }

    body.theme-neon #svg path {
      filter: drop-shadow(0 0 3px currentColor);
    }

    /* 📜 Бумага */
    body.theme-paper #canvas-wrapper {
      background-color: #f5f1e8;
      background-image: radial-gradient(circle, rgba(120, 100, 70, 0.15) 1px, transparent 1px);
    }


    /* Сетка выключена — работает во всех темах */
    body #canvas-wrapper.grid-off,
    body.theme-neon #canvas-wrapper.grid-off,
    body.theme-paper #canvas-wrapper.grid-off,
    body.theme-academy #canvas-wrapper.grid-off,
    body.theme-kids #canvas-wrapper.grid-off,
    body.dark #canvas-wrapper.grid-off {
      background-image: none;
    }

    /* 🎓 Тёмная академия */
    body.theme-academy #canvas-wrapper {
      background-color: #1a1f2e;
      background-image: radial-gradient(circle, rgba(200, 170, 90, 0.18) 1px, transparent 1px);
    }

    body.theme-academy #project-name,
    body.theme-academy #toolbar,
    body.theme-academy #left-panel,
    body.theme-academy #side-panel,
    body.theme-academy #minimap {
      background: rgba(26, 31, 46, 0.95);
      color: #e8e0c8;
    }

    body.theme-academy .btn,
    body.theme-academy .lp-title,
    body.theme-academy .lp-section-title {
      color: #e8e0c8;
    }

    body.theme-academy .node {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(200, 170, 90, 0.15);
    }

    /* 🧸 Детская */
    body.theme-kids #canvas-wrapper {
      background-color: #fff0f6;
      background-image: radial-gradient(circle, rgba(255, 100, 150, 0.2) 1px, transparent 1px);
      background-size: 30px 30px;
    }

    /* Превью темы в панели (маленький квадратик) */
    .theme-preview {
      aspect-ratio: 1;
      border-radius: 8px;
      cursor: pointer;
      border: 2px solid transparent;
      transition: transform 0.15s, border-color 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      position: relative;
    }

    .theme-preview:hover {
      transform: scale(1.05);
    }

    .theme-preview.active {
      border-color: #0071e3;
      box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
    }

    .theme-preview .theme-label {
      position: absolute;
      bottom: 4px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 10px;
      font-weight: 600;
      color: #1d1d1f;
      text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
    }

    body.dark .theme-preview .theme-label,
    body.theme-academy .theme-preview .theme-label {
      color: #f5f5f7;
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    }

    .themes-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 8px;
      margin-bottom: 8px;
    }


/* ───────── [NETFOLD: warm studio home] ───────── */
#home {
  --nf-paper: #f4eee5;
  --nf-card: #fffdf9;
  --nf-ink: #302b27;
  --nf-muted: #898078;
  --nf-line: #e8dfd4;
  --nf-coral: #ca684c;
  --nf-coral-dark: #ad523a;
  --nf-sage: #87927a;
  background: radial-gradient(ellipse at 92% 0%, rgba(226, 188, 151, 0.19), transparent 35%), var(--nf-paper);
  color: var(--nf-ink);
  padding: clamp(28px, 6vh, 68px) clamp(20px, 5vw, 64px);
}

/* Cabinet layout and shared theme tokens */
#home { display: none; padding: 0; background: var(--nf-paper); color: var(--nf-ink); }
#home.active { display: flex; }
#home .home-sidebar { width: 238px; min-width: 238px; min-height: 100%; padding: calc(28px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); display: flex; flex-direction: column; border-right: 1px solid var(--nf-line); background: color-mix(in srgb, var(--nf-paper) 88%, var(--nf-card)); }
#home .home-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 54px 8px; color: var(--nf-ink); text-decoration: none; font-size: 19px; font-weight: 760; letter-spacing: -.04em; }
#home .home-brand .landing-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--nf-accent); color: white; font-size: 23px; }
#home .home-nav-label { padding: 0 10px; margin-bottom: 12px; color: var(--nf-muted); font-size: 10px; font-weight: 750; letter-spacing: .13em; }
#home .home-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px; color: var(--nf-ink); font-size: 14px; font-weight: 650; }
#home .home-nav-item.active { background: color-mix(in srgb, var(--nf-accent) 12%, var(--nf-card)); color: var(--nf-accent); }
#home .home-nav-item > span:first-child { font-size: 18px; }
#home .home-sidebar-spacer { flex: 1; }
#home .home-profile-card { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--nf-line); border-radius: 15px; background: var(--nf-card); }
#home .home-avatar { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 50%; background: color-mix(in srgb, var(--nf-accent) 18%, var(--nf-card)); color: var(--nf-accent); font-weight: 750; }
#home .home-profile-copy { min-width: 0; flex: 1; display: grid; gap: 3px; }
#home .home-profile-copy strong { overflow: hidden; text-overflow: ellipsis; color: var(--nf-ink); font-size: 12px; }
#home .home-profile-copy span { color: var(--nf-muted); font-size: 10px; }
#home .home-profile-copy span { display: none; }
.home-resource-cards { display:grid; grid-template-columns:1fr; gap:9px; margin:18px 0 0; }
#home .home-resource-card { display:flex; align-items:center; gap:11px; min-height:78px; padding:14px 15px; border:1px solid var(--nf-line); border-radius:17px; background:var(--nf-card); color:var(--nf-ink); text-decoration:none; box-shadow:0 6px 18px rgba(68,49,34,.04); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; animation:home-resource-rise .45s both; }
#home .home-resource-card:nth-child(2) { animation-delay:.08s; }
#home .home-resource-card:nth-child(3) { animation-delay:.16s; }
#home .home-resource-card:hover { transform:translateY(-3px); border-color:color-mix(in srgb,var(--nf-accent) 35%,var(--nf-line)); box-shadow:0 12px 25px rgba(68,49,34,.1); }
#home .home-resource-card > span:nth-child(2) { min-width:0; flex:1; display:grid; gap:4px; }
#home .home-resource-card strong { font-size:13px; }
#home .home-resource-card small { color:var(--nf-muted); font-size:11px; line-height:1.35; }
#home .resource-icon { font-size:25px; }
#home .home-resource-card > span:last-child { color:var(--nf-accent); font-size:20px; }
@keyframes home-resource-rise { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }

#home .home-profile-more { width: auto; min-width: 68px; min-height: 36px; padding: 0 13px; border: 1px solid var(--nf-line); border-radius: 10px; background: color-mix(in srgb, var(--nf-accent) 9%, var(--nf-card)); color: var(--nf-accent); font: 650 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; cursor: pointer; }
#home .home-main { min-width: 0; flex: 1; overflow-y: auto; padding: calc(24px + env(safe-area-inset-top)) calc(clamp(22px, 5vw, 68px) + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(clamp(22px, 5vw, 68px) + env(safe-area-inset-left)); }
#home .home-topbar { max-width: 1180px; min-height: 48px; margin: 0 auto 54px; display: flex; justify-content: space-between; align-items: center; gap: 18px; }
#home #account-status { max-width: min(34vw, 340px); color: var(--nf-muted); font-size: 12px; }
#home .home-actions { flex-wrap: nowrap; }
#home .home-actions .home-btn { min-height: 38px; padding: 8px 12px; border-radius: 11px; font-size: 12px; }
#home .home-language-wrap, #home .home-theme-picker { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 10px 0 12px; border: 1px solid var(--nf-line); border-radius: 12px; background: var(--nf-card); color: var(--nf-muted); }
#home .home-language-wrap .language-switcher { min-width: 72px; min-height: 38px; padding: 0 20px 0 8px; border: 0; background: transparent; color: var(--nf-ink); appearance: auto; -webkit-appearance: menulist; }
#home .home-language-wrap { padding-right: 10px; }
#home .home-welcome, #home .home-library { max-width: 1180px; margin: 0 auto; }
#home .home-welcome { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 48px; }
#home .home-eyebrow { margin-bottom: 12px; color: var(--nf-accent); font-size: 10px; font-weight: 750; letter-spacing: .14em; }
#home .home-welcome h1 { margin: 0 0 9px; color: var(--nf-ink); font-size: clamp(34px, 4vw, 46px); letter-spacing: -.055em; }
#home .home-new-action { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 17px; border: 0; border-radius: 13px; background: var(--nf-accent); color: white; font: 650 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; box-shadow: 0 8px 20px color-mix(in srgb, var(--nf-accent) 23%, transparent); }
#home .home-new-action > span:first-child { font-size: 20px; }
#home .home-section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 18px; margin-bottom: 20px; }
#home .home-section-heading h2 { color: var(--nf-ink); font-size: 19px; letter-spacing: -.025em; }
#home .home-section-heading p { margin-top: 6px; color: var(--nf-muted); font-size: 12px; }
#home .home-library-tools { display: flex; align-items: center; gap: 9px; }
#home .home-search { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 1px solid var(--nf-line); border-radius: 12px; background: var(--nf-card); color: var(--nf-muted); }
#home .home-search > span { font-size: 20px; }
#home .home-search input { width: 180px; border: 0; outline: 0; background: transparent; color: var(--nf-ink); font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; user-select: text; }
#home .home-search input::placeholder { color: var(--nf-muted); }
#home .home-theme-picker { min-height: 40px; }
#home .home-theme-picker select { max-width: 120px; border: 0; outline: 0; background: transparent; color: var(--nf-ink); font: 12px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
#home .projects { max-width: none; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
#home .project-card { min-height: 174px; padding: 23px; border: 1px solid var(--nf-line); border-color: var(--nf-line); background: linear-gradient(145deg, color-mix(in srgb, var(--nf-card) 96%, var(--nf-accent)), var(--nf-card)); box-shadow: 0 8px 22px rgba(68,49,34,.045); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; overflow: hidden; }
#home .project-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: color-mix(in srgb, var(--nf-accent) 62%, transparent); opacity: .45; transition: opacity .22s ease, width .22s ease; }
#home .project-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--nf-accent) 40%, var(--nf-line)); box-shadow: 0 16px 32px rgba(68,49,34,.11); }
#home .project-card:hover::before { width: 6px; opacity: .9; }
#home .project-card .title { color: var(--nf-ink); }
#home .project-card .meta { color: var(--nf-muted); }
#home .project-card .icon-btn { background: color-mix(in srgb, var(--nf-accent) 10%, var(--nf-card)); color: var(--nf-ink); }
#home .new-card { min-height: 174px; border-color: color-mix(in srgb, var(--nf-accent) 34%, var(--nf-line)); border-radius: 19px; color: var(--nf-accent); }
#home .new-card:hover { border-color: var(--nf-accent); background: color-mix(in srgb, var(--nf-accent) 6%, var(--nf-card)); color: var(--nf-accent); }
#home .home-resource-cards { grid-template-columns: 1fr; gap: 9px; margin-top: 18px; }
#home .home-resource-card { min-height: 78px; padding: 14px 15px; border-radius: 17px; background: linear-gradient(145deg, var(--nf-card), color-mix(in srgb, var(--nf-card) 92%, var(--nf-accent))); }
#home .home-resource-card > span:first-child { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 38px; border-radius: 13px; background: color-mix(in srgb, var(--nf-accent) 12%, var(--nf-card)); font-size: 20px; }
#home .home-resource-card strong { letter-spacing: -.01em; }
#home .home-empty-state { min-height: 230px; display: grid; justify-items: center; align-content: center; gap: 11px; color: var(--nf-muted); text-align: center; }
#home .home-empty-state[hidden] { display: none; }
#home .home-empty-state > span:first-child { color: var(--nf-accent); font-size: 26px; }
#home .home-empty-state strong { color: var(--nf-ink); font-size: 17px; }
#home .home-empty-state > span:not(:first-child) { font-size: 13px; }
#home .home-empty-state .home-btn { margin-top: 7px; background: var(--nf-accent); color: white; }
#home .home-footer-slogan { max-width: 1180px; margin: 56px auto 0; padding-top: 16px; display: flex; gap: 9px; border-top: 1px solid var(--nf-line); color: var(--nf-muted); font-size: 11px; }
#home .home-footer-slogan span:first-child { color: var(--nf-ink); font-weight: 750; }

body.theme-atelier { --nf-paper:#f4eee5; --nf-card:#fffdf9; --nf-ink:#302b27; --nf-muted:#898078; --nf-line:#e8dfd4; --nf-accent:#ca684c; }
body.theme-botanical { --nf-paper:#edf1e9; --nf-card:#fbfcf8; --nf-ink:#29352c; --nf-muted:#748174; --nf-line:#dbe4d8; --nf-accent:#66836b; }
body.theme-lagoon { --nf-paper:#eaf1f4; --nf-card:#fbfdfe; --nf-ink:#263841; --nf-muted:#71858d; --nf-line:#d8e4e9; --nf-accent:#3d8293; }
body.theme-midnight { --nf-paper:#202a35; --nf-card:#2b3744; --nf-ink:#edf2f2; --nf-muted:#a1b0b7; --nf-line:#3c4b58; --nf-accent:#e28b70; }
body.theme-atelier, body.theme-botanical, body.theme-lagoon, body.theme-midnight { background:var(--nf-paper); color:var(--nf-ink); }
body.theme-midnight { background:var(--nf-paper); color:var(--nf-ink); }
body.theme-midnight #canvas-wrapper { background:#202a35; }
body.theme-midnight #home .home-sidebar { background:#1c2530; }
body.theme-midnight #home .home-btn, body.theme-midnight #home .home-language-wrap, body.theme-midnight #home .home-theme-picker, body.theme-midnight #home .home-search { background:var(--nf-card); color:var(--nf-ink); border-color:var(--nf-line); }
body.theme-midnight #home .home-profile-more { background:#394754; border-color:#4b5a67; color:#f2a18a; }
body.theme-midnight #home .home-new-action { color:#231f1e; }
body.theme-midnight #home .project-card, body.theme-midnight #home .home-profile-card { background:var(--nf-card); border-color:var(--nf-line); }
body.theme-midnight #home .project-card .icon-btn { background:#394754; color:var(--nf-ink); }
body.theme-atelier #canvas-wrapper, body.theme-botanical #canvas-wrapper, body.theme-lagoon #canvas-wrapper { background:var(--nf-paper); }
body.theme-atelier #canvas-wrapper { --grid-color:rgba(120,94,70,.10); background-image:radial-gradient(circle, rgba(120,94,70,.12) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.42), transparent 48%); }
body.theme-botanical #canvas-wrapper { --grid-color:rgba(72,112,78,.12); background-image:radial-gradient(circle, rgba(72,112,78,.12) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.38), transparent 48%); }
body.theme-lagoon #canvas-wrapper { --grid-color:rgba(54,112,130,.13); background-image:radial-gradient(circle, rgba(54,112,130,.13) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.4), transparent 48%); }
body.theme-midnight #canvas-wrapper { background-image:radial-gradient(circle, rgba(193,214,224,.12) 1px, transparent 1px), linear-gradient(135deg, rgba(255,255,255,.035), transparent 48%); }
body.theme-atelier #left-panel, body.theme-atelier #right-panel, body.theme-botanical #left-panel, body.theme-botanical #right-panel, body.theme-lagoon #left-panel, body.theme-lagoon #right-panel { background:var(--nf-card); color:var(--nf-ink); border-color:var(--nf-line); }
body.theme-midnight #left-panel, body.theme-midnight #right-panel { background:#2b3744; color:#edf2f2; border-color:#3c4b58; }
body.theme-midnight #side-panel, body.theme-midnight #drawing-panel { background:#2b3744; color:#edf2f2; }
body.theme-midnight #side-panel, body.theme-midnight #drawing-panel, body.theme-midnight #left-panel { border-color:#3c4b58; }
body.theme-midnight #left-panel .lp-title { color:#edf2f2; }
body.theme-midnight .lp-section, body.theme-midnight .lp-section-title { color:#edf2f2; }
body.theme-midnight #editor { background:#202a35; }
body.theme-midnight #editor .toolbar, body.theme-midnight #editor .top-toolbar, body.theme-midnight #editor .bottom-toolbar { background:#2b3744; color:#edf2f2; border-color:#3c4b58; }
body.theme-botanical #home .home-nav-item.active { background:#dce8da; }
body.theme-lagoon #home .home-nav-item.active { background:#d8e9ed; }
body.theme-midnight #home .home-nav-item.active { background:#394754; }

#home .header,
#home .projects { max-width: 1180px; }
#home .header { align-items: center; margin-bottom: 36px; }
#home h1 { color: var(--nf-ink); font-size: clamp(34px, 4vw, 48px); letter-spacing: -0.045em; }
#home .sub { color: var(--nf-muted); font-size: 15px; }
#home #account-status { color: var(--nf-muted); }

#home .home-btn {
  min-height: 42px;
  border: 1px solid var(--nf-line);
  border-radius: 13px;
  background: rgba(255, 253, 249, 0.88);
  color: var(--nf-ink);
  box-shadow: 0 3px 10px rgba(68, 49, 34, 0.045);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
#home .home-btn:hover { transform: translateY(-1px); background: var(--nf-card); box-shadow: 0 7px 18px rgba(68, 49, 34, 0.09); }

#home .project-card {
  min-height: 184px;
  border: 1px solid rgba(218, 205, 190, 0.72);
  border-radius: 20px;
  background: var(--nf-card);
  box-shadow: 0 5px 18px rgba(68, 49, 34, 0.055);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
#home .project-card:hover { transform: translateY(-3px); border-color: rgba(202, 104, 76, 0.35); box-shadow: 0 13px 28px rgba(68, 49, 34, 0.11); }
#home .project-card .title { color: var(--nf-ink); }
#home .project-card .meta { color: var(--nf-muted); }
#home .project-card .icon-btn { background: #f5eee6; color: #64584f; }
#home .project-card .icon-btn:hover { background: #efe2d5; }
#home .project-card.conflict-card { border-color: color-mix(in srgb, var(--nf-accent) 48%, var(--nf-line)); }
#home .project-role { display: inline-flex; width: fit-content; margin-top: 10px; padding: 4px 8px; border-radius: 999px; background: color-mix(in srgb, var(--nf-accent) 12%, var(--nf-card)); color: var(--nf-accent); font-size: 11px; font-weight: 750; line-height: 1.1; }
#home .project-role.primary { background: color-mix(in srgb, #71806b 15%, var(--nf-card)); color: #64745d; }
#home .owner-dashboard { max-width: 1180px; margin: 34px auto 0; padding: 24px; border: 1px solid var(--nf-line); border-radius: 20px; background: color-mix(in srgb, var(--nf-card) 92%, var(--nf-paper)); box-shadow: 0 5px 18px rgba(68, 49, 34, 0.055); }
#home .owner-dashboard[hidden] { display: none; }
#home .owner-dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
#home .owner-dashboard-heading h2 { margin: 0; color: var(--nf-ink); font-size: 19px; }
#home .owner-dashboard-heading p { margin-top: 6px; color: var(--nf-muted); font-size: 12px; }
#home .owner-metrics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
#home .owner-metric { min-height: 112px; display: flex; flex-direction: column; justify-content: space-between; padding: 15px; border: 1px solid var(--nf-line); border-radius: 15px; background: var(--nf-card); }
#home .owner-metric > span { font-size: 19px; }
#home .owner-metric strong { color: var(--nf-ink); font-size: 27px; letter-spacing: -.04em; }
#home .owner-metric small { color: var(--nf-muted); font-size: 11px; line-height: 1.25; }

#home .new-card { border-color: #d5bba8; border-radius: 20px; color: var(--nf-coral); transition: background 180ms ease, border-color 180ms ease, transform 180ms ease; }
#home .new-card:hover { transform: translateY(-2px); border-color: var(--nf-coral); background: rgba(202, 104, 76, 0.055); color: var(--nf-coral-dark); }
#home .new-card .plus { font-size: 40px; }

@media (max-width: 700px) {
  #home .home-sidebar { width: 64px; min-width: 64px; padding: calc(18px + env(safe-area-inset-top)) calc(9px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(9px + env(safe-area-inset-left)); align-items: center; }
  #home .home-brand { margin: 0 0 42px; }
  #home .home-brand > span:last-child, #home .home-nav-label, #home .home-nav-item > span:last-child, #home .home-profile-copy { display: none; }
  #home .home-nav-item { padding: 11px; }
  #home .home-profile-card { flex-direction: column; gap: 5px; padding: 4px 2px; border: 0; background: transparent; }
  #home .home-profile-more { min-width: 40px; width: 40px; min-height: 32px; padding: 0; font-size: 0; }
  #home .home-profile-more::before { content: '↪'; font-size: 17px; }
  #home .home-main { padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
  #home .home-topbar { align-items: flex-start; flex-direction: column-reverse; margin-bottom: 34px; }
  #home .owner-dashboard { margin-top: 24px; padding: 18px; }
  #home .owner-dashboard-heading { align-items: flex-start; flex-direction: column; }
  #home .owner-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #home .home-actions { width: 100%; flex-wrap: wrap; }
  #home #account-status { max-width: 100%; width: 100%; }
  #home .home-welcome { align-items: flex-start; flex-direction: column; margin-bottom: 34px; }
  #home .home-section-heading { align-items: flex-start; flex-direction: column; }
  #home .home-library-tools { width: 100%; }
  #home .home-search { flex: 1; }
  #home .home-search input { width: 100%; min-width: 70px; }
  #home .projects { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
}
@media (max-width: 430px) {
  #home .home-sidebar { width: 48px; min-width: 48px; padding: calc(14px + env(safe-area-inset-top)) calc(5px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(5px + env(safe-area-inset-left)); }
  #home .home-brand .landing-brand-mark { width: 32px; height: 32px; }
  #home .home-actions .home-btn { font-size: 11px; padding: 7px 9px; }
  #home .home-welcome h1 { font-size: 34px; }
  #home .home-theme-picker { padding: 0 8px; }
  #home .home-theme-picker select { max-width: 94px; }
}

/* ───────── [NETFOLD: public landing and auth gate] ───────── */
#landing {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0;
  background: var(--nf-paper);
  color: var(--nf-ink);
  user-select: text;
}

#landing button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-nav { max-width: 1280px; height: 86px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.landing-brand { display: inline-flex; align-items: center; gap: 11px; color: var(--nf-ink); text-decoration: none; font: 750 23px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -0.055em; }
.landing-brand-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--nf-coral); color: white; font: 800 21px/1 Georgia, serif; transform: rotate(-5deg); }
.landing-brand-mark img { width: 100%; height: 100%; display: block; object-fit: cover; border-radius: inherit; transform: rotate(5deg); }
.landing-nav-actions { display: flex; align-items: center; gap: 11px; }
.landing-login, .landing-register { min-height: 44px; padding: 0 19px; border-radius: 13px; cursor: pointer; font-size: 14px; font-weight: 650; transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.landing-login { border: 1px solid var(--nf-line); background: rgba(255, 253, 249, 0.72); color: var(--nf-ink); }
.landing-login:hover { background: var(--nf-card); transform: translateY(-1px); }
.landing-register { border: 1px solid var(--nf-coral); background: var(--nf-coral); color: #fffdf9; box-shadow: 0 5px 14px rgba(160, 76, 52, 0.18); }
.landing-register:hover { background: #b9573e; transform: translateY(-2px); box-shadow: 0 8px 19px rgba(160, 76, 52, 0.24); }

.landing-hero { max-width: 1280px; min-height: min(620px, calc(100vh - 86px)); margin: 0 auto; display: grid; grid-template-columns: minmax(360px, 0.88fr) minmax(440px, 1.12fr); align-items: center; gap: clamp(24px, 5vw, 76px); padding: 14px 0 52px; }
.landing-copy { position: relative; z-index: 2; padding: 24px 0 40px; }
.landing-eyebrow, .landing-section-kicker { color: var(--nf-sage); font: 750 11px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0.13em; text-transform: uppercase; }
.landing-eyebrow { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.landing-eyebrow span { width: 8px; height: 8px; border-radius: 50%; background: var(--nf-coral); box-shadow: 0 0 0 5px rgba(202, 104, 76, 0.12); }
.landing-copy h1 { margin: 0; color: var(--nf-ink); font: 700 clamp(54px, 6.6vw, 88px)/0.99 Georgia, "Times New Roman", serif; letter-spacing: -0.065em; }
.landing-copy h1 em { color: var(--nf-coral); font-weight: 500; }
.landing-lead { max-width: 490px; margin: 25px 0 28px; color: #756b62; font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.landing-register-main { min-height: 52px; padding: 0 22px; font-size: 15px; }
.landing-register-main span { margin-left: 12px; font-size: 19px; }
.landing-login-secondary { min-height: 50px; border-color: transparent; background: transparent; color: #64594f; box-shadow: none; }
.landing-login-secondary:hover { background: rgba(255,255,255,.5); }
.landing-reassurance { margin-top: 20px; color: #81776e; font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-reassurance span { margin-right: 5px; color: var(--nf-sage); }

.landing-art { position: relative; min-height: 460px; isolation: isolate; display: grid; place-items: center; }
.landing-art-glow { position: absolute; z-index: -1; width: min(82%, 440px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(231, 198, 165, 0.43), rgba(231, 198, 165, 0.08) 67%, transparent 70%); filter: blur(2px); }
.landing-lines { position: absolute; width: 100%; height: 100%; inset: 0; overflow: visible; }
.landing-lines path { fill: none; stroke: #cbb69e; stroke-width: 2.2; stroke-dasharray: 5 7; animation: netfold-dash 24s linear infinite; }
.landing-lines circle { fill: var(--nf-coral); stroke: var(--nf-paper); stroke-width: 4; }
@keyframes netfold-dash { to { stroke-dashoffset: -96; } }
.landing-map-card { position: absolute; z-index: 1; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 16px; border: 1px solid rgba(222, 208, 191, 0.9); border-radius: 16px; background: rgba(255, 253, 249, 0.94); color: var(--nf-ink); box-shadow: 0 10px 28px rgba(75, 55, 36, 0.10); font: 600 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; white-space: nowrap; animation: netfold-float 5.5s ease-in-out infinite; }
.landing-map-card > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #f5e7d9; color: var(--nf-coral); font-size: 16px; }
.landing-map-center { top: 43%; left: 50%; display: grid; grid-template-columns: 35px auto; gap: 1px 11px; min-height: 75px; padding: 14px 18px; border-color: #ebd5c5; transform: translate(-50%, -50%); animation-delay: -1.2s; }
.landing-map-center .landing-card-icon { grid-row: span 2; width: 35px; height: 35px; border-radius: 12px; background: var(--nf-coral); color: white; }
.landing-map-center strong { align-self: end; font-size: 14px; }
.landing-map-center small { color: var(--nf-muted); font-size: 11px; }
.landing-map-one { top: 18%; left: 5%; animation-delay: -2s; }
.landing-map-two { top: 9%; right: 3%; animation-delay: -3s; }
.landing-map-three { top: 70%; left: 0; animation-delay: -0.6s; }
.landing-map-four { top: 65%; right: 0; animation-delay: -4.1s; }
.landing-map-five { bottom: 0; left: 42%; animation-delay: -2.8s; }
@keyframes netfold-float { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
.landing-art-caption { position: absolute; bottom: -21px; color: #998d80; font: 11px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: .04em; }

.landing-benefits { max-width: 1280px; margin: 0 auto; padding: 33px 0 58px; border-top: 1px solid rgba(203, 188, 169, 0.55); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 5vw, 72px); }
.landing-benefits article { max-width: 330px; }
.landing-benefit-icon { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 14px; border-radius: 13px; font: 700 21px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-benefit-icon.coral { background: #f5dfd5; color: var(--nf-coral); }
.landing-benefit-icon.sage { background: #e5e9de; color: #68775d; }
.landing-benefit-icon.honey { background: #f4e8ce; color: #a77e38; }
.landing-benefits h2 { margin-bottom: 8px; color: var(--nf-ink); font: 650 17px/1.35 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-benefits p { color: var(--nf-muted); font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-usecases { max-width: 1280px; margin: 0 auto; padding: 46px clamp(24px, 5vw, 70px); border: 1px solid rgba(218, 204, 186, 0.7); border-radius: 26px; background: rgba(255, 253, 249, 0.62); display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.landing-usecases h2 { margin-top: 13px; color: var(--nf-ink); font: 650 clamp(25px, 3vw, 36px)/1.12 Georgia, "Times New Roman", serif; letter-spacing: -.035em; }
.landing-chips { max-width: 560px; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.landing-chips span { padding: 10px 14px; border: 1px solid var(--nf-line); border-radius: 999px; background: #fffdf9; color: #665d54; font: 13px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-footer { max-width: 1280px; min-height: 96px; margin: 0 auto; display: flex; align-items: center; gap: 12px; color: #877d73; font: 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.landing-footer > span:first-child { color: var(--nf-ink); font-size: 15px; font-weight: 750; }
.landing-footer button { margin-left: auto; border: 0; background: transparent; color: var(--nf-coral-dark); cursor: pointer; font: 650 13px/1.3 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

@media (max-width: 920px) {
  .landing-hero { grid-template-columns: minmax(300px, .9fr) minmax(330px, 1.1fr); gap: 16px; }
  .landing-map-card { transform: scale(.9); }
  .landing-map-center { transform: translate(-50%, -50%) scale(.92); }
  .landing-usecases { align-items: flex-start; flex-direction: column; }
  .landing-chips { justify-content: flex-start; }
}

@media (max-width: 680px) {
  .landing-nav { height: 70px; }
  .landing-brand { font-size: 21px; }
  .landing-brand-mark { width: 31px; height: 31px; }
  .landing-nav-actions { gap: 7px; }
  .landing-nav .landing-login { min-height: 39px; padding: 0 12px; }
  .landing-nav .landing-register { min-height: 39px; padding: 0 13px; font-size: 12px; }
  .landing-hero { min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 36px 0 46px; }
  .landing-copy { padding: 10px 0 0; }
  .landing-eyebrow { margin-bottom: 18px; font-size: 9px; }
  .landing-copy h1 { font-size: clamp(54px, 14vw, 76px); }
  .landing-lead { margin: 20px 0 23px; font-size: 15px; }
  .landing-cta-row { align-items: stretch; flex-direction: column; }
  .landing-register-main, .landing-login-secondary { width: 100%; }
  .landing-art { width: 100%; min-height: 335px; margin: 16px auto 3px; transform: scale(.91); transform-origin: center top; }
  .landing-map-card { min-height: 49px; padding: 8px 10px; border-radius: 13px; gap: 7px; font-size: 10px; }
  .landing-map-card > span { width: 26px; height: 26px; border-radius: 8px; font-size: 14px; }
  .landing-map-center { grid-template-columns: 29px auto; min-height: 64px; padding: 10px 12px; }
  .landing-map-center .landing-card-icon { width: 29px; height: 29px; }
  .landing-map-center strong { font-size: 11px; }
  .landing-map-center small { font-size: 9px; }
  .landing-map-one { left: -4%; }
  .landing-map-two { right: -5%; }
  .landing-map-three { left: -8%; }
  .landing-map-four { right: -9%; }
  .landing-map-five { left: 39%; }
  .landing-art-caption { bottom: -8px; }
  .landing-benefits { grid-template-columns: 1fr; gap: 25px; padding: 30px 0 38px; }
  .landing-benefits article { max-width: none; display: grid; grid-template-columns: 42px 1fr; column-gap: 13px; }
  .landing-benefit-icon { grid-row: span 2; margin-bottom: 0; }
  .landing-benefits h2 { margin: 0 0 4px; }
  .landing-usecases { padding: 28px 22px; border-radius: 21px; gap: 24px; }
  .landing-chips { gap: 8px; }
  .landing-chips span { padding: 9px 11px; font-size: 12px; }
  .landing-footer { min-height: 82px; gap: 8px; }
  .landing-footer > span:nth-child(2) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .landing-lines path, .landing-map-card { animation: none; }
  #landing *, #landing *::before, #landing *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Dynamic viewport fallback for mobile browser bars and rotation. */
:root { --nf-editor-height: 100vh; }
@supports (height: 100dvh) {
  :root { --nf-editor-height: 100dvh; }
}

/* ───────── [NETFOLD: compact editor controls on phones] ───────── */
@media (max-width: 700px) {
  #project-name {
    top: calc(8px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    max-width: calc(100vw - 112px - env(safe-area-inset-left) - env(safe-area-inset-right));
    padding: 6px 9px;
    font-size: 12px;
  }

  .editor-language-switcher {
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
  }

  #toolbar {
    top: calc(52px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    width: auto;
    max-width: none;
    max-height: min(132px, calc(var(--nf-editor-height) - 210px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-x: hidden;
    overflow-y: auto;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
    padding: 4px;
    gap: 2px;
  }

  #toolbar .btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 9px;
    font-size: 12px;
  }

  #search-box {
    top: calc(192px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
  }

  #left-panel,
  #side-panel {
    top: auto;
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(58vh, calc(var(--nf-editor-height) - 205px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    border-radius: 16px;
  }

  #left-panel.closed {
    transform: translateY(calc(100% + 24px));
  }

  #left-panel:not(.closed),
  #side-panel.open {
    transform: translateY(0);
  }

  body.left-open.right-open #left-panel {
    bottom: calc(45vh + 14px + env(safe-area-inset-bottom));
    max-height: min(42vh, calc(var(--nf-editor-height) - 205px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  body.left-open.right-open #side-panel {
    max-height: min(42vh, calc(var(--nf-editor-height) - 205px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  #drawing-panel {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: min(112px, calc(var(--nf-editor-height) - 205px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-y: auto;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
    padding: 6px 8px;
    border-radius: 14px;
  }

  body.drawing-mode.left-open #drawing-panel,
  body.drawing-mode.right-open #drawing-panel,
  body.drawing-mode.left-open.right-open #drawing-panel {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    transform: none;
  }

  body.drawing-mode #left-panel,
  body.drawing-mode #side-panel {
    bottom: calc(120px + env(safe-area-inset-bottom));
    max-height: min(48vh, calc(var(--nf-editor-height) - 300px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  body.drawing-mode.left-open.right-open #left-panel {
    bottom: calc(46vh + 128px + env(safe-area-inset-bottom));
  }

  #drawing-panel .dp-hint {
    display: none;
  }

  #drawing-panel .dp-close {
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
  }

  body.drawing-mode #hint,
  body.drawing-mode #zoom-indicator {
    bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* Tablet portrait: keep controls within the screen without turning side panels into sheets. */
@media (min-width: 701px) and (max-width: 900px) {
  #project-name {
    top: calc(8px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    max-width: calc(34vw - env(safe-area-inset-left));
    font-size: 13px;
  }

  .editor-language-switcher {
    top: calc(8px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
  }

  #toolbar {
    top: calc(54px + env(safe-area-inset-top));
    left: calc(10px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
    width: auto;
    max-width: none;
    max-height: min(100px, calc(var(--nf-editor-height) - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-y: auto;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
    gap: 2px;
  }

  #search-box {
    top: calc(160px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    width: auto;
    min-width: 0;
    max-width: none;
    transform: none;
  }

  #drawing-panel {
    left: calc(10px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: min(112px, calc(var(--nf-editor-height) - 190px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-y: auto;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
  }

  body.drawing-mode.left-open #drawing-panel {
    left: calc(276px + env(safe-area-inset-left));
    right: calc(10px + env(safe-area-inset-right));
  }

  body.drawing-mode.right-open #drawing-panel {
    left: calc(10px + env(safe-area-inset-left));
    right: calc(296px + env(safe-area-inset-right));
  }

  body.drawing-mode.left-open.right-open #drawing-panel {
    left: calc(276px + env(safe-area-inset-left));
    right: calc(296px + env(safe-area-inset-right));
  }
}

/* Landscape phones and compact tablets: use side drawers and a horizontally scrollable toolbar. */
@media (orientation: landscape) and (max-height: 520px) {
  #project-name {
    top: calc(6px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    max-width: min(32vw, 260px);
    padding: 5px 8px;
    font-size: 12px;
  }

  .editor-language-switcher {
    top: calc(6px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    min-height: 30px;
  }

  #toolbar {
    top: calc(44px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    width: auto;
    max-width: none;
    max-height: 46px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    transform: none;
    padding: 3px;
    gap: 1px;
    touch-action: pan-x;
    scrollbar-width: none;
  }

  #toolbar::-webkit-scrollbar,
  #drawing-panel::-webkit-scrollbar {
    display: none;
  }

  #toolbar .btn {
    flex: 0 0 auto;
    min-height: 34px;
    padding: 5px 8px;
  }

  #search-box {
    top: calc(96px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    width: auto;
    min-width: 0;
    transform: none;
  }

  #left-panel {
    top: calc(48px + env(safe-area-inset-top));
    left: calc(8px + env(safe-area-inset-left));
    right: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(280px, 34vw);
    max-height: none;
    transform: translateX(0);
  }

  #left-panel.closed {
    transform: translateX(calc(-100% - 24px));
  }

  #side-panel {
    top: calc(48px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
    left: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: min(320px, 38vw);
    max-height: none;
    transform: translateX(calc(100% + 24px));
  }

  #side-panel.open {
    transform: translateX(0);
  }

  #drawing-panel,
  body.drawing-mode.left-open #drawing-panel,
  body.drawing-mode.right-open #drawing-panel,
  body.drawing-mode.left-open.right-open #drawing-panel {
    left: calc(8px + env(safe-area-inset-left));
    right: calc(8px + env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: 104px;
    overflow-y: auto;
    flex-wrap: wrap;
    justify-content: center;
    transform: none;
  }

  #drawing-panel .dp-close {
    top: 0;
    right: 0;
    width: 30px;
    height: 30px;
  }

  body.drawing-mode #left-panel,
  body.drawing-mode #side-panel {
    bottom: calc(112px + env(safe-area-inset-bottom));
  }

  #drawing-panel .dp-hint {
    display: none;
  }

  body.drawing-mode #hint,
  body.drawing-mode #zoom-indicator {
    bottom: calc(112px + env(safe-area-inset-bottom));
  }
}

/* Tablet landscape: retain side panels, but reserve a flexible lane for drawing tools. */
@media (orientation: landscape) and (min-width: 901px) and (max-width: 1200px) and (min-height: 521px) {
  #project-name {
    top: calc(12px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    max-width: 24vw;
  }

  .editor-language-switcher {
    top: calc(12px + env(safe-area-inset-top));
    right: calc(12px + env(safe-area-inset-right));
  }

  #toolbar {
    top: calc(56px + env(safe-area-inset-top));
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    max-width: none;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    transform: none;
    scrollbar-width: none;
    touch-action: pan-x;
  }

  #toolbar::-webkit-scrollbar { display: none; }

  #search-box {
    top: calc(112px + env(safe-area-inset-top));
    max-width: min(360px, 42vw);
  }

  #left-panel,
  #side-panel {
    top: calc(112px + env(safe-area-inset-top));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  #drawing-panel {
    left: calc(12px + env(safe-area-inset-left));
    right: calc(12px + env(safe-area-inset-right));
    bottom: calc(12px + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: min(112px, calc(var(--nf-editor-height) - 110px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    justify-content: flex-start;
    transform: none;
  }

  body.drawing-mode.left-open #drawing-panel {
    left: calc(272px + env(safe-area-inset-left));
  }

  body.drawing-mode.right-open #drawing-panel {
    right: calc(292px + env(safe-area-inset-right));
  }

  body.drawing-mode.left-open.right-open #drawing-panel {
    left: calc(272px + env(safe-area-inset-left));
    right: calc(292px + env(safe-area-inset-right));
  }

  body.drawing-mode #hint,
  body.drawing-mode #zoom-indicator {
    bottom: calc(124px + env(safe-area-inset-bottom));
  }
}

/* ───────── [NETFOLD: mobile gesture and panel guardrails] ───────── */
@media (max-width: 700px) {
  /* Safari must leave pinch gestures to the map handler, not zoom the page. */
  #editor {
    touch-action: none;
    overscroll-behavior: none;
  }

  #editor #left-panel,
  #editor #side-panel,
  #editor #left-panel .lp-body {
    touch-action: pan-y;
    overscroll-behavior: contain;
  }

  #editor #toolbar,
  #editor #drawing-panel {
    touch-action: none;
  }

  #left-panel,
  #side-panel {
    max-height: min(44vh, calc(var(--nf-editor-height) - 220px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  #left-panel {
    border-radius: 18px 18px 0 0;
  }

  #side-panel {
    padding: 14px;
    border-radius: 18px 18px 0 0;
  }

  body.left-open.right-open #left-panel,
  body.left-open.right-open #side-panel {
    max-height: min(34vh, calc(var(--nf-editor-height) - 220px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }

  body.drawing-mode #left-panel,
  body.drawing-mode #side-panel {
    max-height: min(38vh, calc(var(--nf-editor-height) - 315px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  }
}

/* Mobile multi-selection mode */
.mobile-selection-btn { display: none; }

@media (max-width: 700px) {
  .mobile-selection-btn { display: inline-flex; }
}

@media (max-width: 700px) {
  body.mobile-selection-mode #editor {
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
  }

  /* В режиме выделения браузер не должен запускать выделение текста ноды. */
  body.mobile-selection-mode #editor .node,
  body.mobile-selection-mode #editor .node * {
    user-select: none !important;
    -webkit-user-select: none !important;
  }

  body.mobile-selection-mode #editor .node {
    touch-action: none;
  }
}

/* Вложения ноды */
.node-attachments-list { display:grid; gap:6px; margin-top:9px; }
.node-attachment-row { display:flex; align-items:center; gap:5px; min-width:0; padding:7px 8px; border:1px solid rgba(134,134,139,.2); border-radius:9px; background:rgba(134,134,139,.06); font-size:11px; }
.node-attachment-row a { min-width:0; flex:1; overflow:hidden; color:inherit; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.node-attachment-row a:hover { text-decoration:underline; }
.node-attachment-row .node-attachment-open { flex:0 0 auto; padding:2px 5px; border:0; border-radius:5px; background:rgba(0,113,227,.1); color:#0071e3; font-family:inherit; font-size:10px; cursor:pointer; }
.node-attachment-row small { color:#86868b; white-space:nowrap; }
.node-attachment-remove { border:0; padding:0 3px; background:transparent; color:#c45e49; font-size:17px; line-height:1; cursor:pointer; }
.node-attachment-badge { display:inline-flex; align-items:center; width:max-content; margin:4px 7px 0; padding:3px 7px; border-radius:999px; background:rgba(91,115,156,.12); color:inherit; font-size:10px; cursor:pointer; }

/* ───────── [STYLES: net-status] Пометка офлайн-режима ───────── */
.net-status { display: none; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #fff1d6; color: #8a5a00; font-size: 12px; font-weight: 600; white-space: nowrap; }
body.net-offline .net-status { display: inline-flex; }
.net-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #e39b16; }
#home .home-status-wrap { display: flex; align-items: center; gap: 10px; min-width: 0; }
.net-status-editor { position: fixed; top: calc(60px + env(safe-area-inset-top)); left: calc(20px + env(safe-area-inset-left)); z-index: 1000; box-shadow: 0 2px 8px rgba(0, 0, 0, .08); pointer-events: auto; }
body.dark .net-status, body.theme-midnight .net-status { background: #4a3a17; color: #ffe2a8; }
@media (max-width: 700px) {
  .net-status-editor { top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); left: calc(8px + env(safe-area-inset-left)); }
  #home .home-status-wrap { width: 100%; }
}

/* ───────── [STYLES: dev-host] Пометка версии для разработки ───────── */
.dev-host-badge { position: fixed; left: 16px; bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 13000; padding: 5px 12px; border-radius: 999px; background: #2f2a26; color: #fff4dc; font-size: 12px; font-weight: 600; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); pointer-events: none; white-space: nowrap; }


/* ───────── Выбор шрифта ноды (выпадающий список) ───────── */
.font-select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: inherit;
  font-size: 14px;
  cursor: pointer;
}
.font-select:focus { outline: none; border-color: #0071e3; }
body.dark .font-select,
body.theme-midnight .font-select { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #f5f5f7; }
body.dark .font-select option,
body.theme-midnight .font-select option { background: #1c1c1e; color: #f5f5f7; }

/* ───────── Пробелы и пустые строки в ноде сохраняются ───────── */
.node .md-view p, .node .md-view li { white-space: pre-wrap; }
.node .md-view .md-blank { height: 1.5em; }

/* Название карты не заезжает под центральную панель инструментов */
@media (min-width: 901px) {
  #project-name { max-width: max(140px, calc(50vw - 450px)); }
}


/* ───────── Форматирование части текста ───────── */
.node .md-view .md-fmt, .md-view .md-fmt { line-height: 1.25; }
.md-toolbar .md-fmt-a { font-weight: 800; border-bottom: 3px solid #e03131; line-height: 1; padding: 0 1px; }
.md-toolbar .md-fmt-hl { background: #fff3a0; color: #1d1d1f; border-radius: 3px; padding: 0 3px; font-size: 12px; font-weight: 600; }
.md-toolbar .md-fmt-size { font-weight: 700; font-size: 14px; line-height: 1; }
.md-toolbar .md-fmt-size small { font-size: 9px; font-weight: 700; }
.md-fmt-popover { position: fixed; z-index: 9600; display: none; flex-direction: column; gap: 8px; min-width: 188px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.98); box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06); color: #1d1d1f; font-size: 12px; }
.md-fmt-popover.open { display: flex; }
.md-fmt-swatches { display: grid; grid-template-columns: repeat(5, 28px); gap: 6px; }
.md-fmt-swatch { width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(0,0,0,.14); cursor: pointer; padding: 0; }
.md-fmt-swatch:hover { transform: scale(1.1); }
.md-fmt-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.md-fmt-link { border: none; background: none; color: #0071e3; cursor: pointer; font-size: 12px; padding: 2px 0; }
.md-fmt-custom { display: flex; align-items: center; gap: 4px; cursor: pointer; color: #6e6e73; }
.md-fmt-custom input { width: 28px; height: 22px; padding: 0; border: none; background: none; cursor: pointer; }
.md-fmt-size-opt { text-align: left; padding: 6px 10px; border: none; border-radius: 8px; background: #f5f5f7; color: inherit; cursor: pointer; font-family: inherit; }
.md-fmt-size-opt:hover { background: #e8e8ed; }
body.dark .md-fmt-popover, body.theme-midnight .md-fmt-popover { background: rgba(40,40,44,.98); color: #f5f5f7; box-shadow: 0 12px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.1); }
body.dark .md-fmt-size-opt, body.theme-midnight .md-fmt-size-opt { background: rgba(255,255,255,.08); }
body.dark .md-fmt-size-opt:hover, body.theme-midnight .md-fmt-size-opt:hover { background: rgba(255,255,255,.16); }
body.dark .md-fmt-swatch, body.theme-midnight .md-fmt-swatch { border-color: rgba(255,255,255,.25); }


/* ───────── Панель форматирования текста (в стиле таблиц) ───────── */
.md-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 2px;
  padding: 5px 8px; border-radius: 15px;
  background: rgba(255, 253, 249, 0.97);
  border: 1px solid rgba(68, 49, 34, 0.08);
  box-shadow: 0 12px 30px rgba(68, 49, 34, 0.14), 0 0 0 1px rgba(68, 49, 34, 0.04);
  max-width: calc(100vw - 16px);
}
.md-toolbar .md-group { display: flex; align-items: center; gap: 1px; }
.md-toolbar .md-btn { width: 30px; height: 30px; border-radius: 9px; font-size: 14px; position: relative; }
.md-toolbar .md-btn:hover, .md-toolbar .md-font-btn:hover { background: rgba(202, 104, 76, 0.12); }
.md-toolbar .md-btn:active { background: rgba(202, 104, 76, 0.22); }
.md-toolbar .md-divider { width: 1px; height: 22px; margin: 0 5px; background: rgba(68, 49, 34, 0.12); }
.md-toolbar .md-font-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  height: 30px; min-width: 112px; padding: 0 8px 0 10px; border: none; border-radius: 9px;
  background: transparent; color: inherit; font-size: 13px; cursor: pointer;
}
.md-toolbar .md-font-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 96px; }
.md-toolbar .md-caret { font-size: 9px; opacity: .6; }
.md-toolbar .md-size { gap: 0; }
.md-toolbar .md-size .md-btn { width: 24px; font-size: 16px; }
.md-toolbar .md-size-input {
  width: 34px; height: 26px; padding: 0; text-align: center; font-size: 13px; color: inherit;
  border: 1px solid rgba(68, 49, 34, 0.22); border-radius: 8px; background: rgba(255,255,255,.7); outline: none;
}
.md-toolbar .md-size-input:focus { border-color: #0071e3; background: #fff; }
.md-toolbar .md-split { display: flex; align-items: center; border-radius: 9px; }
.md-toolbar .md-split-main { flex-direction: column; gap: 1px; justify-content: center; width: 28px; }
.md-toolbar .md-split-arrow { width: 14px; padding: 0; font-size: 9px; color: inherit; opacity: .75; }
.md-toolbar .md-glyph-a { font-weight: 800; font-size: 15px; line-height: 1; }
.md-toolbar .md-bar { display: block; width: 16px; height: 3px; border-radius: 2px; }
.md-toolbar .md-split-main svg { display: block; }
.md-toolbar-inline { margin-bottom: 8px; gap: 4px 2px; padding: 6px; background: #fffdf9; box-shadow: 0 0 0 1px rgba(68, 49, 34, 0.1); border-radius: 13px; }
.md-toolbar-inline .md-divider { display: none; }
.md-toolbar-inline .md-group { margin-right: 4px; }
.md-toolbar-inline .md-font-btn { min-width: 118px; }
.md-fmt-font-opt { text-align: left; padding: 7px 10px; border: none; border-radius: 8px; background: transparent; color: inherit; cursor: pointer; font-size: 14px; }
.md-fmt-font-opt:hover { background: rgba(202, 104, 76, 0.12); }
.md-fmt-font-opt.active { background: rgba(0, 113, 227, 0.1); color: #0071e3; }
.md-fmt-aligns { display: flex; gap: 4px; }
.md-fmt-align-opt { min-width: 34px; height: 32px; padding: 0 8px; border: none; border-radius: 8px; background: #f5f5f7; color: inherit; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.md-fmt-align-opt:hover { background: rgba(202, 104, 76, 0.14); }
.md-fmt-align-opt.active { background: rgba(0, 113, 227, 0.12); color: #0071e3; }
.md-fmt-popover[data-kind="font"] { min-width: 200px; max-height: 340px; overflow-y: auto; gap: 1px; }
body.dark .md-toolbar, body.theme-midnight .md-toolbar, body.dark .md-toolbar-inline, body.theme-midnight .md-toolbar-inline { background: rgba(44, 42, 40, 0.98); border-color: rgba(255,255,255,.1); color: #f5f5f7; }
body.dark .md-toolbar .md-divider, body.theme-midnight .md-toolbar .md-divider { background: rgba(255,255,255,.16); }
body.dark .md-toolbar .md-size-input, body.theme-midnight .md-toolbar .md-size-input { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #f5f5f7; }
body.dark .md-toolbar .md-btn, body.theme-midnight .md-toolbar .md-btn { color: #f5f5f7; }
body.dark .md-fmt-align-opt, body.theme-midnight .md-fmt-align-opt { background: rgba(255,255,255,.08); }
body.dark .md-fmt-font-opt:hover, body.theme-midnight .md-fmt-font-opt:hover { background: rgba(255,255,255,.12); }
.node .node-title { text-align: inherit; }


/* ─── Форма ноды: одна кнопка + выпадающая сетка ─── */
.sp-subsection.sp-inline-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-subsection.sp-inline-row .sp-subsection-title { margin: 0; }
.shape-select {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; min-width: 150px;
  border: 1px solid rgba(0,0,0,.1); border-radius: 10px; background: rgba(255,253,249,.97);
  color: inherit; font: inherit; font-size: 13px; cursor: pointer;
}
.shape-select:hover { background: rgba(202,104,76,.10); }
.shape-select:disabled { opacity: .5; cursor: default; }
.shape-select-icon { display: inline-flex; color: #0071e3; }
.shape-select-name { flex: 1; text-align: left; }
.shape-select-caret { font-size: 10px; opacity: .6; }
.shape-popover {
  position: fixed; z-index: 10050; display: none; grid-template-columns: repeat(3, 104px); gap: 4px; padding: 8px;
  background: rgba(255,253,249,.98); border: 1px solid rgba(0,0,0,.1); border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.shape-popover.open { display: grid; }
.shape-opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
  border: 1px solid transparent; border-radius: 10px; background: transparent; color: #3a332e;
  font: inherit; font-size: 11px; cursor: pointer;
}
.shape-opt:hover { background: rgba(202,104,76,.12); }
.shape-opt.active { border-color: #0071e3; color: #0071e3; background: rgba(0,113,227,.08); }
body.dark .shape-select, body.theme-midnight .shape-select,
body.dark .shape-popover, body.theme-midnight .shape-popover { background: #2a2623; border-color: rgba(255,255,255,.12); color: #f2ece6; }
body.dark .shape-opt, body.theme-midnight .shape-opt { color: #e7dfd8; }
body.dark .shape-opt:hover, body.theme-midnight .shape-opt:hover { background: rgba(202,104,76,.22); }
body.dark .shape-opt.active, body.theme-midnight .shape-opt.active { color: #5aa9ff; border-color: #5aa9ff; background: rgba(90,169,255,.12); }
.title-toolbar.disabled { opacity: .5; pointer-events: none; }


/* ─── Редактор текста без видимой разметки ─── */
.rich-edit { white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere; cursor: text; }
.rich-edit:focus { outline: none; }
.rich-edit.is-empty::before { content: attr(data-placeholder); opacity: .4; pointer-events: none; }
.rich-edit strong { font-weight: 700; }
.rich-edit.content-field.body-field { min-height: 90px; max-height: 260px; overflow-y: auto; resize: none; }
.node .node-body.rich-edit { min-height: 1.4em; user-select: text; -webkit-user-select: text; }

/* ─── Вкладки открытых карт ─── */
#map-tabs {
  position: fixed; top: 100px; left: 20px; z-index: 998;
  display: flex; align-items: center; gap: 4px; padding: 2px;
  max-width: calc(100vw - 460px); overflow-x: auto; scrollbar-width: none;
}
#map-tabs::-webkit-scrollbar { display: none; }
.map-tab {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto; max-width: 200px;
  padding: 5px 6px 5px 12px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  background: rgba(255,253,249,.92); border: 1px solid rgba(0,0,0,.08); color: #3a332e;
  font-size: 12.5px; box-shadow: 0 2px 8px rgba(0,0,0,.05);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.map-tab:hover { background: rgba(202,104,76,.12); }
.map-tab.active { background: #fff; border-color: #0071e3; color: #0071e3; font-weight: 600; }
.map-tab-name { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.map-tab-x {
  width: 18px; height: 18px; border: none; border-radius: 50%; background: transparent; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer; opacity: .55; padding: 0;
}
.map-tab-x:hover { background: rgba(0,0,0,.1); opacity: 1; }
.map-tab-add {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 10px; border: 1px dashed rgba(0,0,0,.2);
  background: transparent; color: #6e6e73; font-size: 16px; cursor: pointer;
}
.map-tab-add:hover { background: rgba(202,104,76,.12); color: #3a332e; }
body.dark .map-tab, body.theme-midnight .map-tab { background: rgba(42,38,35,.92); border-color: rgba(255,255,255,.12); color: #e7dfd8; }
body.dark .map-tab:hover, body.theme-midnight .map-tab:hover { background: rgba(202,104,76,.25); }
body.dark .map-tab.active, body.theme-midnight .map-tab.active { background: #1c1917; border-color: #5aa9ff; color: #5aa9ff; }
body.dark .map-tab-x:hover, body.theme-midnight .map-tab-x:hover { background: rgba(255,255,255,.14); }
body.dark .map-tab-add, body.theme-midnight .map-tab-add { border-color: rgba(255,255,255,.25); color: #b9b0a8; }
.open-tab-badge { color: #0071e3; font-size: 9px; vertical-align: middle; }
@media (max-width: 700px) { #map-tabs { display: none; } }

#map-lock-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); z-index: 20000;
  max-width: min(520px, calc(100vw - 32px)); padding: 11px 16px; border-radius: 12px;
  background: rgba(29,29,31,.94); color: #fff; font-size: 13.5px; line-height: 1.4; text-align: center;
  box-shadow: 0 8px 26px rgba(0,0,0,.28); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
}
#map-lock-toast.show { opacity: 1; transform: translateX(-50%); }


/* ═══ Netfold brand: fonts + theme (v1) ═══ */
@font-face { font-family: "Onest"; src: url("assets/fonts/Onest-var.woff") format("woff"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Unbounded"; src: url("assets/fonts/Unbounded-var.woff") format("woff"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("assets/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
:root {
  --nfb-ultramarine: #2F45FF; --nfb-amber: #FFB547; --nfb-graphite: #16181D; --nfb-paper: #F4F1EA; --nfb-fog: #EEF0FF;
  --nfb-font-display: "Unbounded", "Onest", system-ui, sans-serif;
  --nfb-font-text: "Onest", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --nfb-font-mono: "JetBrains Mono", "SF Mono", Consolas, monospace;
}
body.theme-netfold { --nf-paper:#F4F1EA; --nf-card:#FFFFFF; --nf-ink:#16181D; --nf-muted:#6B6F7A; --nf-line:#16181D1f; --nf-accent:#2F45FF; background:var(--nf-paper); color:var(--nf-ink); font-family:var(--nfb-font-text); }
body.theme-netfold button, body.theme-netfold input, body.theme-netfold select, body.theme-netfold textarea { font-family: inherit; }
body.theme-netfold #canvas-wrapper { background-color:var(--nf-paper); background-image:radial-gradient(circle, rgba(22,24,29,.16) 1.2px, transparent 1.4px); background-size:24px 24px; }
body.theme-netfold #left-panel, body.theme-netfold #right-panel, body.theme-netfold #side-panel, body.theme-netfold #drawing-panel { background:var(--nf-card); color:var(--nf-ink); border-color:rgba(22,24,29,.14); }
body.theme-netfold #home h1, body.theme-netfold .lp-title, body.theme-netfold .landing-brand { font-family:var(--nfb-font-display); font-weight:600; letter-spacing:-0.02em; }
body.theme-netfold #home .home-btn, body.theme-netfold #home .home-search, body.theme-netfold #home .home-language-wrap, body.theme-netfold #home .home-theme-picker { background:#fff; border:1.5px solid var(--nfb-graphite); color:var(--nfb-graphite); }
body.theme-netfold #home .home-new-action, body.theme-netfold #home .home-empty-state .home-btn { background:var(--nfb-ultramarine); color:#fff; border:1.5px solid var(--nfb-graphite); box-shadow:3px 3px 0 var(--nfb-graphite); }
body.theme-netfold #home .project-card, body.theme-netfold #home .home-profile-card { background:#fff; border:1.5px solid var(--nfb-graphite); box-shadow:5px 5px 0 var(--nfb-graphite); }
body.theme-netfold #home .home-nav-item.active { background:var(--nfb-fog); color:var(--nfb-ultramarine); }
body.theme-netfold #home .home-sidebar { background:var(--nfb-paper); }
body.theme-netfold #editor .toolbar, body.theme-netfold #editor .top-toolbar, body.theme-netfold #editor .bottom-toolbar { background:#fff; border-color:rgba(22,24,29,.14); color:var(--nfb-graphite); }
body.theme-netfold .node-counter, body.theme-netfold .map-tab-count { font-family:var(--nfb-font-mono); }

/* Netfold brand: главная, доводка */
body.theme-netfold #home .home-actions { flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
body.theme-netfold #home .home-btn { white-space: nowrap; text-decoration: none; font-weight: 600; font-size: 13px; border-radius: 12px; box-shadow: 2px 2px 0 var(--nfb-graphite); transition: transform .12s ease, box-shadow .12s ease; }
body.theme-netfold #home .home-btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--nfb-graphite); }
body.theme-netfold #home .home-btn:active { transform: translate(1px,1px); box-shadow: 0 0 0 var(--nfb-graphite); }
body.theme-netfold #home .home-language-wrap { border-radius: 12px; box-shadow: 2px 2px 0 var(--nfb-graphite); }
body.theme-netfold #home .home-new-action { border-radius: 14px; font-family: var(--nfb-font-text); font-weight: 600; box-shadow: 4px 4px 0 var(--nfb-graphite); }
body.theme-netfold #home .home-new-action:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--nfb-graphite); }
body.theme-netfold #home .home-resource-card { background: #fff; border: 1.5px solid var(--nfb-graphite); border-radius: 14px; box-shadow: 3px 3px 0 var(--nfb-graphite); }
body.theme-netfold #home .home-resource-card:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--nfb-graphite); border-color: var(--nfb-graphite); }
body.theme-netfold #home .home-resource-card .resource-icon { background: var(--nfb-fog); }
body.theme-netfold #home .home-resource-card strong { font-family: var(--nfb-font-text); font-weight: 600; }
body.theme-netfold #home .home-resource-card > span:last-child, body.theme-netfold #home .home-resource-card svg { color: var(--nfb-ultramarine); }
body.theme-netfold #home .home-profile-card { border-radius: 14px; box-shadow: 3px 3px 0 var(--nfb-graphite); }
body.theme-netfold #home .home-eyebrow { font-family: var(--nfb-font-mono); font-weight: 500; letter-spacing: .08em; color: var(--nfb-ultramarine); }
body.theme-netfold #home .project-card { border-radius: 16px; background: #fff; }
body.theme-netfold #home .project-card::before { background: var(--nfb-ultramarine); opacity: 1; width: 0; }
body.theme-netfold #home .project-card:hover { transform: translate(-2px,-2px); border-color: var(--nfb-graphite); box-shadow: 7px 7px 0 var(--nfb-graphite); }
body.theme-netfold #home .project-card:hover::before { width: 0; }
body.theme-netfold #home .project-card .title { font-family: var(--nfb-font-display); font-weight: 600; font-size: 17px; letter-spacing: -.01em; line-height: 1.25; }
body.theme-netfold #home .project-card .meta { font-family: var(--nfb-font-mono); font-size: 11px; font-weight: 500; }
body.theme-netfold #home .project-card .icon-btn { background: #fff; border: 1.5px solid var(--nfb-graphite); color: var(--nfb-graphite); border-radius: 9px; }
body.theme-netfold #home .project-card .icon-btn:hover { background: var(--nfb-amber); }
body.theme-netfold #home .home-section-heading h2 { font-family: var(--nfb-font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; }
body.theme-netfold #home .home-new-card, body.theme-netfold #home .project-card.new-card { border: 1.5px dashed var(--nfb-graphite); background: transparent; box-shadow: none; }
body.theme-netfold #home .home-new-card *, body.theme-netfold #home .project-card.new-card * { color: var(--nfb-ultramarine); }
body.theme-netfold #home .new-card { border: 1.5px dashed var(--nfb-graphite); background: transparent; color: var(--nfb-ultramarine); border-radius: 16px; font-weight: 600; box-shadow: none; }
body.theme-netfold #home .new-card .plus { color: var(--nfb-ultramarine); }
body.theme-netfold #home .new-card:hover { background: var(--nfb-fog); border-color: var(--nfb-ultramarine); transform: none; box-shadow: none; }

/* ═══ Темы: сильные визуальные различия (v2) ═══ */
/* Общие токены формы: радиус, толщина рамки, тень, шрифт заголовков */
body.theme-atelier   { --th-r:20px; --th-btn-r:14px;  --th-shadow:0 10px 26px rgba(120,80,50,.10); --th-font:Georgia,"Times New Roman",serif; --th-hw:600; --th-ls:-.02em; }
body.theme-botanical { --th-r:30px; --th-btn-r:999px; --th-shadow:0 12px 30px rgba(70,110,75,.14); --th-font:ui-rounded,"SF Pro Rounded","Varela Round","Nunito",-apple-system,sans-serif; --th-hw:700; --th-ls:-.01em; }
body.theme-lagoon    { --th-r:18px; --th-btn-r:12px;  --th-shadow:0 14px 36px rgba(40,120,140,.16); --th-font:"Avenir Next","Helvetica Neue",-apple-system,sans-serif; --th-hw:300; --th-ls:-.03em; }
body.theme-midnight  { --th-r:10px; --th-btn-r:8px;   --th-shadow:0 0 0 1px rgba(110,231,255,.28),0 0 26px rgba(110,231,255,.10); --th-font:"JetBrains Mono","SF Mono",Menlo,monospace; --th-hw:500; --th-ls:-.02em; }

/* Мастерская: тёплая бумага, засечки, линованный лист */
body.theme-atelier { --nf-paper:#f3ebdd; --nf-card:#fffaf1; --nf-ink:#3a2e26; --nf-muted:#8c7b6c; --nf-line:#e4d6c1; --nf-accent:#b8553a; }
body.theme-atelier #canvas-wrapper { background-color:#f3ebdd; background-image:repeating-linear-gradient(to bottom, transparent 0 31px, rgba(150,110,80,.16) 31px 32px); background-size:100% 32px; }

/* Ботаника: мягкая зелень, крупные скругления, капсулы */
body.theme-botanical { --nf-paper:#e6efdc; --nf-card:#f9fcf3; --nf-ink:#25382a; --nf-muted:#6c8570; --nf-line:#cfe0c6; --nf-accent:#4f8a54; }
body.theme-botanical #canvas-wrapper { background-color:#e6efdc; background-image:radial-gradient(circle at 18% 22%, rgba(120,170,100,.28), transparent 34%), radial-gradient(circle at 82% 78%, rgba(160,200,120,.26), transparent 38%), radial-gradient(circle, rgba(60,110,64,.16) 2px, transparent 2.4px); background-size:auto,auto,40px 40px; }

/* Лагуна: прохладное стекло, градиент, тонкая сетка */
body.theme-lagoon { --nf-paper:#d9eef3; --nf-card:rgba(255,255,255,.62); --nf-ink:#16424e; --nf-muted:#5c8794; --nf-line:rgba(255,255,255,.75); --nf-accent:#1b94ad; }
body.theme-lagoon, body.theme-lagoon #home { background:linear-gradient(165deg,#c9e9f1 0%,#e6f5f8 55%,#f3fbfc 100%) fixed; }
body.theme-lagoon #canvas-wrapper { background-color:#e2f2f6; background-image:linear-gradient(rgba(27,148,173,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(27,148,173,.13) 1px, transparent 1px); background-size:32px 32px; }

/* Полночь: глубокий тёмный, неоновый циан, моно-шрифт */
body.theme-midnight { --nf-paper:#0d1220; --nf-card:#161d31; --nf-ink:#e8eefc; --nf-muted:#8a97b8; --nf-line:#27324f; --nf-accent:#6ee7ff; }
body.theme-midnight, body.theme-midnight #canvas-wrapper, body.theme-midnight #editor { background-color:#0d1220; }
body.theme-midnight #canvas-wrapper { background-image:radial-gradient(circle, rgba(110,231,255,.22) 1px, transparent 1.4px); background-size:22px 22px; }
body.theme-midnight #home .home-sidebar { background:#0a0e1a; }
body.theme-midnight #left-panel, body.theme-midnight #right-panel, body.theme-midnight #side-panel, body.theme-midnight #drawing-panel, body.theme-midnight #editor .toolbar, body.theme-midnight #editor .top-toolbar, body.theme-midnight #editor .bottom-toolbar { background:#161d31; border-color:#27324f; color:#e8eefc; }
body.theme-midnight #home .home-new-action, body.theme-midnight #home .home-empty-state .home-btn { background:var(--nf-accent); color:#06222b; }
body.theme-midnight #home .home-nav-item.active { background:rgba(110,231,255,.12); color:var(--nf-accent); }
body.theme-midnight #home .home-eyebrow { color:var(--nf-accent); font-family:var(--th-font); }

/* Общие правила для четырёх тем: форма карточек, кнопок, заголовков */
body.theme-atelier #home h1, body.theme-botanical #home h1, body.theme-lagoon #home h1, body.theme-midnight #home h1,
body.theme-atelier #home .home-section-heading h2, body.theme-botanical #home .home-section-heading h2, body.theme-lagoon #home .home-section-heading h2, body.theme-midnight #home .home-section-heading h2,
body.theme-atelier #home .project-card .title, body.theme-botanical #home .project-card .title, body.theme-lagoon #home .project-card .title, body.theme-midnight #home .project-card .title { font-family:var(--th-font); font-weight:var(--th-hw); letter-spacing:var(--th-ls); }
body.theme-atelier #home .project-card, body.theme-botanical #home .project-card, body.theme-lagoon #home .project-card, body.theme-midnight #home .project-card,
body.theme-atelier #home .home-resource-card, body.theme-botanical #home .home-resource-card, body.theme-lagoon #home .home-resource-card, body.theme-midnight #home .home-resource-card,
body.theme-atelier #home .home-profile-card, body.theme-botanical #home .home-profile-card, body.theme-lagoon #home .home-profile-card, body.theme-midnight #home .home-profile-card,
body.theme-atelier #home .new-card, body.theme-botanical #home .new-card, body.theme-lagoon #home .new-card, body.theme-midnight #home .new-card { border-radius:var(--th-r); box-shadow:var(--th-shadow); }
body.theme-atelier #home .home-btn, body.theme-botanical #home .home-btn, body.theme-lagoon #home .home-btn, body.theme-midnight #home .home-btn,
body.theme-atelier #home .home-new-action, body.theme-botanical #home .home-new-action, body.theme-lagoon #home .home-new-action, body.theme-midnight #home .home-new-action,
body.theme-atelier #home .home-search, body.theme-botanical #home .home-search, body.theme-lagoon #home .home-search, body.theme-midnight #home .home-search { border-radius:var(--th-btn-r); }
body.theme-lagoon #home .project-card, body.theme-lagoon #home .home-resource-card, body.theme-lagoon #home .home-profile-card, body.theme-lagoon #home .home-btn, body.theme-lagoon #home .home-search { background:rgba(255,255,255,.55); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); border:1px solid rgba(255,255,255,.8); }
body.theme-lagoon #home .home-sidebar { background:rgba(255,255,255,.35); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); }
body.theme-lagoon #home .project-card::before, body.theme-botanical #home .project-card::before { display:none; }
body.theme-botanical #home .project-card { border:0; background:#fbfef6; }
body.theme-botanical #home .home-btn { border:1.5px solid #bfd5b5; }
body.theme-atelier #home .project-card { border:1px solid var(--nf-line); background:#fffaf1; }
body.theme-atelier #home .project-card::before { background:var(--nf-accent); opacity:.8; }
body.theme-midnight #home .project-card, body.theme-midnight #home .home-resource-card, body.theme-midnight #home .home-profile-card { background:#161d31; border:1px solid #27324f; }
body.theme-midnight #home .project-card:hover { box-shadow:0 0 0 1px var(--nf-accent),0 0 30px rgba(110,231,255,.22); border-color:var(--nf-accent); transform:translateY(-3px); }
body.theme-midnight #home .project-card::before { background:var(--nf-accent); }
body.theme-midnight #home .project-card .meta { font-family:var(--th-font); }
body.theme-midnight #home .new-card { background:transparent; border:1px dashed #3a4a73; color:var(--nf-accent); box-shadow:none; }

/* #home задаёт свои переменные — переопределяем их для каждой темы */
body.theme-netfold #home { --nf-paper:#F4F1EA; --nf-card:#FFFFFF; --nf-ink:#16181D; --nf-muted:#6B6F7A; --nf-line:#16181d1f; --nf-accent:#2F45FF; }
body.theme-atelier #home { --nf-paper:#f3ebdd; --nf-card:#fffaf1; --nf-ink:#3a2e26; --nf-muted:#8c7b6c; --nf-line:#e4d6c1; --nf-accent:#b8553a; }
body.theme-botanical #home { --nf-paper:#e6efdc; --nf-card:#f9fcf3; --nf-ink:#25382a; --nf-muted:#6c8570; --nf-line:#cfe0c6; --nf-accent:#4f8a54; }
body.theme-lagoon #home { --nf-paper:#d9eef3; --nf-card:rgba(255,255,255,.62); --nf-ink:#16424e; --nf-muted:#5c8794; --nf-line:rgba(255,255,255,.75); --nf-accent:#1b94ad; }
body.theme-midnight #home { --nf-paper:#0d1220; --nf-card:#161d31; --nf-ink:#e8eefc; --nf-muted:#8a97b8; --nf-line:#27324f; --nf-accent:#6ee7ff; }
body.theme-atelier #home, body.theme-botanical #home, body.theme-netfold #home, body.theme-midnight #home { background:var(--nf-paper); }
body.theme-midnight #home .home-btn, body.theme-midnight #home .home-search, body.theme-midnight #home .home-language-wrap, body.theme-midnight #home .home-theme-picker { background:#161d31; color:#e8eefc; border:1px solid #27324f; }
body.theme-midnight #home .home-btn:hover { border-color:var(--nf-accent); color:var(--nf-accent); }
body.theme-midnight #home .home-resource-card .resource-icon { background:rgba(110,231,255,.12); }
body.theme-midnight #home .project-card .icon-btn { background:#0d1220; color:#e8eefc; border:1px solid #27324f; }
body.theme-midnight #home .home-profile-more { background:#0d1220; color:var(--nf-accent); border-color:#27324f; }
body.theme-midnight #editor .toolbar, body.theme-midnight #editor .top-toolbar { background:rgba(22,29,49,.92); }
body.theme-atelier #home .new-card, body.theme-botanical #home .new-card, body.theme-lagoon #home .new-card { color:var(--nf-accent); border:1.5px dashed color-mix(in srgb, var(--nf-accent) 55%, transparent); background:transparent; box-shadow:none; }
body.theme-atelier #home .new-card .plus, body.theme-botanical #home .new-card .plus, body.theme-lagoon #home .new-card .plus { color:var(--nf-accent); }

/* ═══ Темы: тулбар, вкладки, превью (v3) — стили нод теперь в assets/ui/nf-nodes.css ═══ */
/* ── Мини-превью тем в левой панели ── */
.theme-preview .tp-mini { position:absolute; inset:0; pointer-events:none; }
.theme-preview .tp-n { position:absolute; display:block; border-radius:3px; }
.theme-preview .tp-c  { left:30%; top:20%; width:40%; height:22%; }
.theme-preview .tp-b1 { left:8%;  top:50%; width:34%; height:15%; }
.theme-preview .tp-b2 { right:8%; top:50%; width:34%; height:15%; }
.theme-preview .tp-d1 { left:8%;  top:8%;  width:18%; height:9%; }
.theme-preview .tp-d2 { right:8%; top:8%;  width:18%; height:9%; }
.theme-preview { overflow:hidden; }
.theme-preview .theme-label { z-index:2; }
.theme-preview.tp-netfold { background-image:radial-gradient(circle, rgba(22,24,29,.25) 1px, transparent 1.3px); background-size:8px 8px; }
.tp-netfold .tp-c { background:#16181D; box-shadow:2px 2px 0 #16181D; }
.tp-netfold .tp-b { background:#fff; box-shadow:0 0 0 1.5px #2F45FF, 2px 2px 0 #2F45FF; }
.tp-netfold .tp-d { background:#EEF0FF; box-shadow:0 0 0 1px #16181D; }
.tp-atelier .tp-c { background:#b8553a; border-radius:5px; box-shadow:0 2px 5px rgba(120,80,50,.3); }
.tp-atelier .tp-b { background:#fffaf1; border-radius:5px; box-shadow:0 2px 5px rgba(120,80,50,.2); }
.tp-atelier .tp-d { background:#f5e9d3; border-radius:4px; }
.tp-botanical .tp-n { border-radius:999px; }
.tp-botanical .tp-c { background:#4f8a54; box-shadow:0 3px 7px rgba(70,110,75,.35); }
.tp-botanical .tp-b { background:#f4fbea; box-shadow:0 3px 7px rgba(70,110,75,.25); }
.tp-botanical .tp-d { background:#dcecc9; }
.theme-preview.tp-lagoon { background-image:linear-gradient(rgba(27,148,173,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(27,148,173,.18) 1px, transparent 1px); background-size:9px 9px; }
.tp-lagoon .tp-c { background:linear-gradient(135deg,#1b94ad,#3cc3d6); border-radius:6px; }
.tp-lagoon .tp-b { background:rgba(255,255,255,.85); border-radius:6px; box-shadow:0 0 0 1px #fff; }
.tp-lagoon .tp-d { background:rgba(255,255,255,.55); border-radius:5px; }
.tp-midnight .tp-c { background:#6ee7ff; border-radius:2px; box-shadow:0 0 10px rgba(110,231,255,.7); }
.tp-midnight .tp-b { background:#1a2340; border-radius:2px; box-shadow:0 0 0 1px rgba(110,231,255,.6); }
.tp-midnight .tp-d { background:#111830; border-radius:2px; box-shadow:0 0 0 1px #27324f; }
.theme-preview.tp-midnight .theme-label { color:#e8eefc; text-shadow:none; }
.theme-preview.tp-midnight { background-image:radial-gradient(circle, rgba(110,231,255,.3) 1px, transparent 1.3px); background-size:8px 8px; }
@media (min-width: 701px) { #left-panel { top: calc(140px + env(safe-area-inset-top)); } }