/* =========================================================
   ReMind — refined design system
   ========================================================= */

/* Theme variable blocks moved to themes.css (loaded before this file). */

* { box-sizing: border-box; }
/* Hidden attribute must always win over flex/grid display */
[hidden] { display: none !important; }
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: var(--font-ui);
  font-feature-settings: "cv02","cv03","cv04","cv11";
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* =========================================================
   LAYOUT
   ========================================================= */
#app { display: flex; flex-direction: column; height: 100vh; width: 100vw; }
#main { flex: 1; display: flex; min-height: 0; }

/* =========================================================
   TOP BAR
   ========================================================= */
#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 16px;
  height: 52px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  /* Trên overlay workflow (z-index 60) để dropdown Export/account bấm được
     khi đang xem workflow; vẫn dưới context-menu (200) và modal (300). */
  z-index: 70;
  position: relative;
}
.brand { display: flex; align-items: center; gap: 10px; }
.logo {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.3px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
[data-theme="vintage"] .logo {
  letter-spacing: 0.4px;
  font-size: 18px;
  -webkit-text-stroke: 0;
}

.map-title-wrap { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 10px; }
#mapTitle {
  flex: 1;
  min-width: 0;
  max-width: 360px;
  padding: 8px 12px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
#mapTitle:hover { background: var(--panel-2); border-color: var(--border); }
#mapTitle:focus { outline: none; background: var(--panel-2); border-color: var(--accent); }
.save-status { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.save-status.saving { color: var(--accent); }

.top-actions { display: flex; align-items: center; gap: 4px; }
.divider { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.zoom-label { font-size: 12px; color: var(--text-muted); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; }

/* =========================================================
   BUTTONS
   ========================================================= */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  min-width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13px;
  transition: background 0.12s, color 0.12s, transform 0.06s;
}
.icon-btn:hover { background: var(--panel-hover); color: var(--text); }
.icon-btn:active { transform: scale(0.95); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.danger:hover { background: rgba(240,78,78,0.1); }
.icon-btn.active { background: var(--accent-soft); color: var(--accent); }

.primary-btn {
  padding: 7px 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: filter 0.12s, transform 0.06s;
}
.primary-btn:hover { filter: brightness(1.08); }
.primary-btn:active { transform: scale(0.97); }
.primary-btn.small { padding: 5px 10px; font-size: 12px; }
.primary-btn.danger { background: linear-gradient(135deg, var(--danger), #c44141); }

.btn-secondary {
  padding: 7px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s;
}
.btn-secondary:hover { background: var(--panel-hover); }
.btn-secondary.small { padding: 5px 10px; font-size: 12px; }

.menu-wrap { position: relative; }
.dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 180px;
  padding: 6px;
  z-index: 100;
}
.dropdown div {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.dropdown div:hover { background: var(--panel-hover); }

/* =========================================================
   SIDEBAR
   ========================================================= */
#sidebar {
  width: var(--sidebar-w, 280px);
  display: flex;
  background: var(--panel);
  border-right: 1px solid var(--border);
  transition: width 0.2s, margin-left 0.2s;
  overflow: hidden;
  position: relative;
}
#sidebar.collapsed { width: 0; margin-left: -1px; }
#sidebar.sidebar-resizing { transition: none; }
/* Tay kéo mép phải sidebar để nới rộng (vòng 9). */
#sidebarResizer {
  position: absolute; top: 0; right: 0; bottom: 0; width: 6px; z-index: 5;
  cursor: col-resize; touch-action: none;
}
#sidebarResizer:hover, #sidebar.sidebar-resizing #sidebarResizer {
  background: var(--accent-soft);
}
#sidebar.collapsed #sidebarResizer { display: none; }

.side-tabs {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel-2);
  border-right: 1px solid var(--border);
  padding: 8px 0;
  gap: 2px;
}
.side-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  background: transparent;
  border: none;
  border-left: 2px solid transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 10px;
  font-weight: 500;
  transition: color 0.12s, background 0.12s;
}
.side-tab:hover { color: var(--text); background: var(--panel-hover); }
.side-tab.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-soft); }
.side-tab svg { width: 18px; height: 18px; }

.side-content { flex: 1; overflow-y: auto; }
.side-panel { padding: 14px 16px; }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.panel-header h3 { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: -0.2px; color: var(--text); }
.hint { font-size: 12px; color: var(--text-muted); margin: 0 0 12px; line-height: 1.4; }
.panel-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

.list { list-style: none; padding: 0; margin: 8px 0 0; }
.list li {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  transition: background 0.12s;
}
.list li:hover { background: var(--panel-hover); }
.list li.active { background: var(--accent-soft); color: var(--accent); font-weight: 500; }
/* Khối tên + dòng phụ "x nodes": tên chiếm trọn chiều ngang. */
.list li .map-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.list li .map-name {
  /* Tên map: wrap tối đa 3 dòng rồi "…" (tooltip title hiện tên đầy đủ). */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; text-overflow: ellipsis;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  line-height: 1.3;
}
.list li .map-del {
  opacity: 0;
  transition: opacity 0.12s;
  padding: 4px 8px;
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(240,78,78,0.2);
}
.list li:hover .map-del { opacity: 1; }
.list li .map-del:hover { color: var(--danger); background: rgba(240,78,78,0.1); }
.list li .map-del:active { background: rgba(240,78,78,0.2); }
.list li .map-meta {
  /* Dòng phụ nhỏ ngay dưới tên, KHÔNG chiếm chỗ ngang của tên. */
  flex: 0 0 auto; font-size: 10px; color: var(--text-muted); white-space: nowrap;
}

/* ---------- Folders in "My maps" ---------- */
.panel-header-actions { display: flex; align-items: center; gap: 6px; }

/* A folder is a container <li> holding a header + a nested map list. */
.list li.map-folder {
  display: block;
  padding: 0;
  margin-bottom: 4px;
  cursor: default;
  background: transparent;
}
.list li.map-folder:hover { background: transparent; }

.folder-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background 0.12s;
}
.folder-head:hover { background: var(--panel-hover); }
.folder-head.drop-hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.folder-chev { width: 12px; font-size: 10px; color: var(--text-muted); flex: 0 0 auto; }
.folder-icon { font-size: 13px; flex: 0 0 auto; }
/* Khối tên + dòng phụ số map: tên chiếm trọn chiều ngang. */
.folder-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.folder-name {
  min-width: 0;
  /* Tên thư mục: wrap tối đa 3 dòng rồi "…" (tooltip title hiện tên đầy đủ). */
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; line-clamp: 3;
  overflow: hidden; text-overflow: ellipsis;
  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
  line-height: 1.3;
  outline: none;
}
.folder-name.editing {
  display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 1px 4px;
  box-shadow: inset 0 0 0 1px var(--accent);
  white-space: normal;
}
.folder-count {
  font-size: 10px; font-weight: 700;
  color: var(--text-soft);
  background: var(--panel-hover);
  border-radius: 999px;
  padding: 1px 7px;
  flex: 0 0 auto;
}
/* Trong folder-info: số map là DÒNG PHỤ nhỏ dưới tên (không pill). */
.folder-info .folder-count {
  align-self: flex-start; background: none; padding: 0;
  font-weight: 600; color: var(--text-muted);
}
.folder-del {
  opacity: 0;
  transition: opacity 0.12s;
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  font: inherit; font-size: 16px; line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.folder-head:hover .folder-del { opacity: 1; }
.folder-del:hover { color: var(--danger); background: rgba(240,78,78,0.1); }
/* Nút thêm board / thêm thư mục con / di chuyển: cùng kiểu .folder-del, hiện khi hover. */
.folder-add-board, .folder-add-sub, .folder-move {
  opacity: 0;
  transition: opacity 0.12s;
  padding: 2px 5px;
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.folder-head:hover .folder-add-board,
.folder-head:hover .folder-add-sub,
.folder-head:hover .folder-move { opacity: 0.85; }
.folder-add-board:hover, .folder-add-sub:hover, .folder-move:hover { opacity: 1 !important; background: var(--panel-hover); color: var(--text); }
.folder-head.dragging { opacity: 0.5; }
.folder-head.drop-deny,
.ungrouped-head.drop-deny,
.root-drop.drop-deny { background: rgba(200,60,60,.08); box-shadow: inset 0 0 0 1.5px rgba(200,60,60,.5); }

.folder-maps { list-style: none; padding: 0 0 0 12px; margin: 2px 0 0 7px; border-left: 1px solid var(--border); }
/* Từ cấp 4 trở đi thụt hẹp hơn để sidebar 220px không bóp tên. */
.map-folder.depth-3 > .folder-maps,
.map-folder.depth-4 > .folder-maps,
.map-folder.depth-5 > .folder-maps,
.map-folder.depth-6 > .folder-maps { padding-left: 8px; margin-left: 5px; }
.map-folder:not(.depth-1) > .folder-head > .folder-icon { font-size: 11px; }
.map-folder:not(.depth-1) > .folder-head { padding: 6px 6px; }
/* Vùng thả "ra gốc": chỉ hiện khi đang kéo folder. */
.list li.root-drop {
  display: none;
  margin-top: 6px; padding: 8px 10px !important;
  font-size: 11px; font-style: italic; text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: default !important;
}
.list.dragging-folder li.root-drop { display: block; }
.list li.root-drop:hover { background: transparent; }
.list li.root-drop.drop-hover { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.map-folder.collapsed .folder-maps { display: none; }
.folder-empty {
  font-size: 11px; color: var(--text-muted);
  padding: 6px 10px !important; font-style: italic;
  cursor: default !important;
}
.folder-empty:hover { background: transparent !important; }

.ungrouped-head {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px !important;
  margin-top: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: default !important;
}
.ungrouped-head:hover { background: transparent !important; }
.ungrouped-head.drop-hover { background: var(--accent-soft) !important; box-shadow: inset 0 0 0 1.5px var(--accent); border-radius: var(--radius-sm); }
.ungrouped-label { flex: 1; }

.map-name.editing {
  display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible;
  background: var(--panel-2);
  border-radius: 4px;
  padding: 1px 4px;
  box-shadow: inset 0 0 0 1px var(--accent);
  white-space: normal;
  outline: none;
}
.list li.dragging { opacity: 0.5; }
.list li .map-move {
  opacity: 0;
  transition: opacity 0.12s;
  padding: 4px 6px;
  border-radius: 4px;
  color: var(--text-muted);
  background: transparent;
  border: none;
  font: inherit; font-size: 13px; line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
}
.list li:hover .map-move { opacity: 0.85; }
.list li .map-move:hover { opacity: 1; background: var(--panel-hover); }
.list-empty {
  font-size: 12px; color: var(--text-muted);
  padding: 10px !important; font-style: italic;
  cursor: default !important;
}
.list-empty:hover { background: transparent !important; }

#mapsFilter, #searchInput {
  width: 100%;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}
#mapsFilter:focus, #searchInput:focus { outline: none; border-color: var(--accent); }

/* Templates */
#templateFilter {
  width: 100%;
  padding: 8px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  margin-bottom: 10px;
}
#templateFilter:focus { outline: none; border-color: var(--accent); }
.template-cat {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-muted);
  font-weight: 700;
  padding: 12px 0 6px;
}
.template-cat:first-child { padding-top: 0; }
.template-grid { display: block; }
.template-grid-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.template-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  transition: transform 0.08s, background 0.12s, border-color 0.12s;
}
.template-card:hover {
  border-color: var(--accent);
  background: var(--panel-hover);
  transform: translateX(2px);
}
.template-card .tpl-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.template-card .tpl-text {
  flex: 1;
  min-width: 0;
}
.template-card .tpl-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.template-card .tpl-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Search results */
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.filter-chips label { font-size: 11px; color: var(--text-soft); display: flex; align-items: center; gap: 4px; cursor: pointer; }
.search-results { margin-top: 8px; }
.search-result {
  padding: 8px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  font-size: 12px;
}
.search-result:hover { border-color: var(--accent); }
.search-result mark { background: var(--accent); color: white; padding: 0 2px; border-radius: 2px; }
.search-result .res-path { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Style panel */
.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row > label { font-size: 12px; font-weight: 500; color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.form-row > label input[type="checkbox"] { accent-color: var(--accent); }
.seg {
  display: inline-flex;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
  flex-wrap: wrap;
}
.seg button {
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  font-weight: 500;
}
.seg button:hover { background: var(--panel-hover); color: var(--text); }
.seg button.active { background: var(--accent); color: white; }

/* Layout picker — a grid of instant-apply chips (click = apply now). */
.layout-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.layout-grid button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.layout-grid button span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-soft);
  white-space: nowrap;
}
.layout-grid button:hover {
  background: var(--panel-hover);
  border-color: var(--accent);
  color: var(--text);
}
.layout-grid button:active { transform: scale(0.95); }
.layout-grid button.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.layout-grid button.active span { color: #fff; }

.form-row select, .form-row input[type="text"] {
  padding: 7px 10px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
}

/* Shortcuts */
.shortcut-list { list-style: none; padding: 0; margin: 0; font-size: 12px; color: var(--text-soft); }
.shortcut-list li { padding: 4px 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
kbd {
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: var(--text);
  box-shadow: 0 1px 0 var(--border);
}

/* =========================================================
   WORKSPACE / CANVAS
   ========================================================= */
#workspace { flex: 1; position: relative; overflow: hidden; }

#canvas-wrap {
  position: absolute;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
}
/* Paper grain overlay — cheap, no blend mode */
#canvas-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grain-pattern, none);
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
[data-theme="dark"] #canvas-wrap::before { display: none; }

#canvas-wrap[data-bg="dots"] {
  background-image: radial-gradient(circle, var(--grid) 1px, transparent 1px);
  background-size: 22px 22px;
}
#canvas-wrap[data-bg="grid"] {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
}
#canvas-wrap[data-bg="lines"] {
  background-image:
    linear-gradient(transparent 27px, var(--grid) 27px, var(--grid) 28px, transparent 28px);
  background-size: 100% 28px;
}
[data-theme="vintage"] #canvas-wrap[data-bg="lines"]::after {
  /* faint red margin line in vintage notebook style */
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 96px;
  width: 1px;
  background: rgba(168, 80, 60, 0.25);
  pointer-events: none;
}
#canvas-wrap[data-bg="blank"] { background-image: none; }
#canvas-wrap { cursor: grab; }
#canvas-wrap[data-tool="select"] { cursor: crosshair; }
#canvas-wrap.panning { cursor: grabbing !important; }
#canvas-wrap.pan-ready { cursor: grab !important; }
#canvas-wrap.connecting { cursor: crosshair !important; }
#canvas-wrap.focus-mode .node:not(.in-focus) { opacity: 0.18; filter: saturate(0.4); }
#canvas-wrap.focus-mode #edges path:not(.in-focus) { opacity: 0.15; }
#canvas-wrap.focus-mode #crosslinks-svg path:not(.in-focus) { opacity: 0.1; }

#canvas {
  position: absolute;
  top: 0; left: 0;
  width: 1px; height: 1px;
  transform-origin: 0 0;
  overflow: visible;
}

#edges, #crosslinks-svg, #boundaries-svg {
  position: absolute;
  top: 0; left: 0;
  overflow: visible;
  pointer-events: none;
}
#edges path { fill: none; stroke: var(--edge); stroke-width: 2px; stroke-linecap: round; pointer-events: stroke; transition: opacity 0.2s; }
/* Wide invisible grab-zone along each dây so it's easy to click & drag-rewire */
#edges path.edge-hit { stroke: transparent; stroke-width: 22px; fill: none; pointer-events: stroke; cursor: grab; }
#edges path.edge-hit:active { cursor: grabbing; }
/* Plug knobs at the wire ends — hidden until you hover the wire, then grab */
#edges .edge-plug {
  stroke: var(--panel);
  stroke-width: 2.5px;
  opacity: 0;
  pointer-events: auto;
  cursor: grab;
  transition: opacity 0.12s, r 0.1s;
}
#edges .edge-group:hover .edge-plug,
#edges .edge-group.reveal-plugs .edge-plug,
#edges .edge-group.sel .edge-plug { opacity: 1; }
#edges .edge-plug:hover { r: 11; }
#edges .edge-plug:active { cursor: grabbing; }
/* Selected dây: thicker line + bigger, clearer end handles */
#edges .edge-group.sel path:not(.edge-hit) { stroke-width: 4.5px; }
#edges .edge-group.sel .edge-plug { r: 10.5; stroke-width: 3px; }
#crosslinks-svg path { fill: none; stroke-width: 1.5px; stroke-dasharray: 6 4; pointer-events: stroke; }
#crosslinks-svg .crosslink-label { fill: var(--text-soft); font-size: 11px; font-family: 'Inter', sans-serif; }
#boundaries-svg rect { fill-opacity: 0.08; stroke-width: 1.5; stroke-dasharray: 4 4; rx: 14; ry: 14; transition: opacity 0.2s; }
#boundaries-svg text { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; }

#nodes { position: absolute; top: 0; left: 0; }

/* =========================================================
   NODE
   ========================================================= */
.node {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 60px;
  width: max-content;
  max-width: 280px;
  padding: 10px 16px;
  background: var(--panel);
  border: var(--node-border-width) solid var(--accent);
  color: var(--text);
  border-radius: var(--node-radius);
  box-shadow: var(--node-shadow);
  cursor: grab;
  user-select: none;
  font-family: var(--font-node);
  font-size: 14px;
  line-height: 1.45;
  /* Position assigned per node via inline transform: translate3d() */
  will-change: transform;
  transition: box-shadow 0.18s, opacity 0.2s;
  word-wrap: break-word;
  text-align: center;
}

/* Vintage: tighter borders, slight inner ruled line at top, serif text */
[data-theme="vintage"] .node {
  border-width: 1.5px;
  letter-spacing: 0.1px;
}
[data-theme="vintage"] .node.root {
  font-family: var(--font-headline);
  letter-spacing: 0.5px;
}

/* Modern: slight off-white sticky-note edge highlight */
[data-theme="modern"] .node {
  border-width: 2px;
}
[data-theme="vintage"] .node {
  line-height: 1.55;
}
[data-theme="vintage"] .icon-btn,
[data-theme="vintage"] .btn-secondary,
[data-theme="vintage"] .primary-btn,
[data-theme="vintage"] .seg button,
[data-theme="vintage"] .template-card,
[data-theme="vintage"] .search-result,
[data-theme="vintage"] kbd {
  border-radius: 3px;
}
[data-theme="vintage"] .panel-header h3,
[data-theme="vintage"] .modal-header h3 {
  font-family: var(--font-headline);
  font-weight: 600;
  letter-spacing: 0.6px;
}
[data-theme="vintage"] .section-title,
[data-theme="vintage"] .template-cat {
  font-family: var(--font-headline);
  letter-spacing: 1px;
}
[data-theme="vintage"] #mapTitle {
  font-family: var(--font-headline);
  letter-spacing: 0.4px;
  font-size: 16px;
}
.node:hover { box-shadow: var(--node-shadow-hover); }
.node.selected { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 5; }
.node.selected.multi { outline-color: var(--accent-2); outline-style: dashed; }
.node.dragging { cursor: grabbing; opacity: 0.85; z-index: 1000; box-shadow: var(--shadow-lg); }
.node.drop-target {
  outline: 3px dashed var(--success);
  outline-offset: 4px;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--success) 28%, transparent), var(--shadow-lg);
  filter: brightness(1.04);
}
.node.drop-into { outline: 3px solid var(--accent); outline-offset: 4px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 24%, transparent); }
.drop-bar { position: absolute; background: var(--accent); border-radius: 2px; pointer-events: none; z-index: 1001; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 28%, transparent); }
.drop-bar[hidden] { display: none; }
.node.root { font-size: 18px; font-weight: 700; padding: 14px 22px; min-width: 100px; }
.node.locked { cursor: not-allowed; }
.node.locked::after {
  content: "🔒";
  position: absolute;
  top: -8px;
  left: -8px;
  font-size: 11px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
}
.node[contenteditable="true"] { cursor: text; outline: 3px solid var(--accent); }

.node.shape-rect { border-radius: 4px; }
.node.shape-rounded { border-radius: 10px; }
.node.shape-pill { border-radius: 999px; padding: 9px 22px; }
.node.shape-ellipse { border-radius: 50%; padding: 18px 28px; }
.node.shape-hex { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); padding: 12px 28px; border-radius: 0; }
.node.shape-diamond { border-radius: 0; padding: 18px; }
.node.shape-diamond > * { transform: rotate(-45deg); }
.node.shape-cloud {
  border-radius: 30px 50px 30px 50px / 40px 30px 50px 30px;
}
.node.shape-none { border: none; background: transparent; box-shadow: none; }
.node.shape-none:hover { background: var(--panel-2); }

.node .node-text-row { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.node .icon { font-size: 16px; flex-shrink: 0; }
.node .text-content { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; }
.node .text-content strong { font-weight: 700; }
.node .text-content em { font-style: italic; }
.node .text-content del { text-decoration: line-through; opacity: 0.7; }
.node .text-content code { font-family: 'JetBrains Mono', ui-monospace, monospace; background: var(--panel-2); padding: 1px 5px; border-radius: 3px; font-size: 0.9em; }

.node .image-wrap { margin: 6px -4px 2px; }
.node .image-wrap img { max-width: 240px; max-height: 160px; border-radius: 6px; display: block; margin: 0 auto; }

.node .task-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border: 2px solid var(--text-muted);
  border-radius: 4px;
  margin-right: 6px;
  flex-shrink: 0;
  background: var(--panel);
  font-size: 11px;
  color: white;
  cursor: pointer;
}
.node.task-done .task-check { background: var(--success); border-color: var(--success); }
.node.task-done .task-check::after { content: "✓"; }
.node.task-done .text-content { text-decoration: line-through; color: var(--text-muted); }

.node .badges {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 5px;
  flex-wrap: wrap;
}
.node .badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--panel-2);
  color: var(--text-soft);
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
}
.node .badge.tag { color: white; border-color: transparent; font-weight: 500; }
.node .badge.link { color: var(--accent); }
.node .badge.note { color: var(--warning); }
.node .badge:hover { transform: scale(1.05); }

.node .progress-bar {
  height: 3px;
  background: var(--panel-2);
  border-radius: 2px;
  margin-top: 5px;
  overflow: hidden;
}
.node .progress-bar > div {
  height: 100%;
  background: var(--success);
  transition: width 0.3s;
}

.node .collapse-btn {
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: 2px solid var(--panel);
  font-size: 10px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.12s;
}
.node .collapse-btn:hover { transform: translateY(-50%) scale(1.2); }
.node.collapsed .collapse-btn { background: var(--text-muted); }

.node .quick-add {
  position: absolute;
  opacity: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  font-size: 13px;
  font-weight: bold;
  border: 2px solid var(--panel);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  z-index: 3;
}
.node:hover .quick-add { opacity: 0.95; }
.node .quick-add:hover { transform: scale(1.2); }
.node .quick-add.right { right: -30px; top: 50%; transform: translateY(-50%); }
.node .quick-add.right:hover { transform: translateY(-50%) scale(1.2); }
.node .quick-add.down { bottom: -30px; left: 50%; transform: translateX(-50%); }
.node .quick-add.down:hover { transform: translateX(-50%) scale(1.2); }

/* Miro-style connect ports — drag from a port to make a connector */
.node .connect-port {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--panel);
  opacity: 0;
  cursor: crosshair;
  transition: opacity 0.15s, transform 0.12s;
  z-index: 4;
}
.node:hover .connect-port,
.node.port-hover .connect-port { opacity: 0.9; }
.node .connect-port:hover { transform: scale(1.45); opacity: 1; }
/* The dot sitting on the parent-wire's tail: grab it to re-route the branch. */
.node .connect-port.rewire-grip {
  background: var(--edge);
  cursor: grab;
}
.node .connect-port.rewire-grip:active { cursor: grabbing; }
.node .connect-port.t { top: -7px;    left: 50%;  transform: translateX(-50%); }
.node .connect-port.t:hover { transform: translateX(-50%) scale(1.45); }
.node .connect-port.b { bottom: -7px; left: 50%;  transform: translateX(-50%); }
.node .connect-port.b:hover { transform: translateX(-50%) scale(1.45); }
.node .connect-port.l { left: -7px;   top: 50%;   transform: translateY(-50%); }
.node .connect-port.l:hover { transform: translateY(-50%) scale(1.45); }
.node .connect-port.r { right: -7px;  top: 50%;   transform: translateY(-50%); }
.node .connect-port.r:hover { transform: translateY(-50%) scale(1.45); }
.node.connect-target { box-shadow: 0 0 0 3px var(--accent); }

#connector-drag-svg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 50;
}
#connector-drag-svg path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.5;
  stroke-dasharray: 6 4;
}

/* =========================================================
   SELECTION TOOLBAR
   ========================================================= */
.sel-toolbar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  z-index: 20;
  flex-wrap: wrap;
  max-width: calc(100% - 32px);
}
.sel-toolbar.floating {
  top: auto; left: auto;
  transform: none;
  /* Với vùng chọn nhiều node, toolbar mang thêm nhóm căn chỉnh + nhóm sơ đồ
     nên có thể dài hơn cả khung canvas — cho xuống dòng thay vì tràn ra ngoài
     rồi mất nút. */
  flex-wrap: wrap;
  max-width: calc(100% - 16px);
  pointer-events: auto;
}
.sel-toolbar .align-group { display: inline-flex; align-items: center; gap: 4px; }
.sel-toolbar .group-actions { display: inline-flex; align-items: center; gap: 4px; }
.sel-toolbar .group-actions [disabled] { opacity: .4; cursor: default; }

/* Nút "Sơ đồ" + menu chọn hướng */
.diagram-btn-wrap { position: relative; display: inline-flex; align-items: center; gap: 0; }
.diagram-btn-wrap .primary-btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.diagram-btn-wrap .caret {
  border-top-left-radius: 0; border-bottom-left-radius: 0;
  margin-left: -1px; padding: 4px; min-width: 20px;
}
.diagram-dir-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.diagram-dir-menu[hidden] { display: none; }
.diagram-dir-menu button {
  all: unset;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.diagram-dir-menu button:hover { background: var(--panel-hover); }

/* ---- Ô chọn: khung bao quanh cụm đang chọn (≥2 node) ---- */
#selectionBox {
  position: absolute;
  border: 1.5px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  border-radius: 6px;
  box-sizing: border-box;
  /* Thuần trang trí: chuột do canvas bắt, nhờ vậy bấm vào node bên trong ô
     vẫn ăn, mà kéo chỗ trống trong ô thì canvas hiểu là dời cả cụm. */
  pointer-events: none;
  /* Không đặt z-index: cứ theo thứ tự DOM để ô chọn nằm DƯỚI dây và node,
     không phủ màu lên hộp chữ. */
}
#selectionBox[hidden] { display: none; }
/* Đang kéo cả cụm → con trỏ nắm, và tắt hiệu ứng hover cho đỡ nhiễu. */
#canvas-wrap.group-dragging { cursor: grabbing; }
#canvas-wrap.group-dragging .node { pointer-events: none; }

/* ---- Frame: khung nhóm co giãn quanh một cụm node ---- */
#frames {
  position: absolute;
  inset: 0;
  pointer-events: none;   /* chỉ nhãn + tay nắm mới bắt chuột */
  overflow: visible;
}
.frame {
  position: absolute;
  border: 1.5px dashed var(--fc, var(--border-strong));
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--fc, #6b5e4b) 7%, transparent);
  box-sizing: border-box;
  pointer-events: none;
}
.frame.active { border-style: solid; background: color-mix(in srgb, var(--fc, #6b5e4b) 12%, transparent); }
.frame.locked { border-style: dotted; opacity: .75; }
.frame-label {
  position: absolute;
  top: 6px; left: 10px;
  max-width: calc(100% - 24px);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--fc, #6b5e4b) 18%, var(--panel));
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
}
.frame-label:active { cursor: grabbing; }
.frame.locked .frame-label { cursor: default; }
.frame-handle {
  position: absolute;
  width: 12px; height: 12px;
  border: 1.5px solid var(--fc, var(--border-strong));
  background: var(--panel);
  border-radius: 3px;
  opacity: 0;
  transition: opacity .12s ease;
  pointer-events: auto;
}
.frame:hover .frame-handle,
.frame.active .frame-handle { opacity: 1; }
.frame.locked .frame-handle { display: none; }
.frame-handle.nw { top: -6px; left: -6px; cursor: nwse-resize; }
.frame-handle.ne { top: -6px; right: -6px; cursor: nesw-resize; }
.frame-handle.sw { bottom: -6px; left: -6px; cursor: nesw-resize; }
.frame-handle.se { bottom: -6px; right: -6px; cursor: nwse-resize; }

#snap-guides-svg {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 18;
}
#snap-guides-svg line {
  stroke: #ff3d8a;
  stroke-width: 1;
  stroke-dasharray: 4 3;
  opacity: 0.95;
}

/* Resize handles (Miro-style) — shown only on single selected node */
.node .resize-handle {
  position: absolute;
  width: 9px; height: 9px;
  background: var(--panel);
  border: 1.5px solid var(--accent);
  border-radius: 2px;
  z-index: 6;
  opacity: 0;
  transition: opacity 0.1s;
}
.node.selected:not(.multi) .resize-handle { opacity: 1; }
.node .resize-handle.nw { top: -6px;    left: -6px;    cursor: nwse-resize; }
.node .resize-handle.n  { top: -6px;    left: 50%;     transform: translateX(-50%); cursor: ns-resize; }
.node .resize-handle.ne { top: -6px;    right: -6px;   cursor: nesw-resize; }
.node .resize-handle.e  { top: 50%;     right: -6px;   transform: translateY(-50%); cursor: ew-resize; }
.node .resize-handle.se { bottom: -6px; right: -6px;   cursor: nwse-resize; }
.node .resize-handle.s  { bottom: -6px; left: 50%;     transform: translateX(-50%); cursor: ns-resize; }
.node .resize-handle.sw { bottom: -6px; left: -6px;    cursor: nesw-resize; }
.node .resize-handle.w  { top: 50%;     left: -6px;    transform: translateY(-50%); cursor: ew-resize; }
.sel-toolbar input[type="color"] {
  width: 26px; height: 26px;
  border: 1px solid var(--border);
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.sel-toolbar select {
  padding: 5px 8px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
}
.sel-toolbar .divider { height: 18px; margin: 0 2px; }
.sel-toolbar .icon-btn { font-size: 13px; padding: 4px 6px; height: 28px; min-width: 28px; }

/* =========================================================
   FAB
   ========================================================= */
.fab {
  position: absolute;
  right: 16px;
  bottom: 152px;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  box-shadow: var(--shadow);
  z-index: 30;
  transition: transform 0.15s, box-shadow 0.15s;
}
.fab:hover { transform: scale(1.08); box-shadow: var(--shadow-lg); }
.fab:active { transform: scale(0.96); }

/* =========================================================
   MINIMAP
   ========================================================= */
#minimap {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 200px;
  height: 130px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 40;
  cursor: pointer;
}
#minimapSvg { width: 100%; height: 100%; display: block; }
#minimapView {
  position: absolute;
  border: 2px solid var(--accent);
  background: rgba(91,108,255,0.1);
  pointer-events: none;
  border-radius: 2px;
}

/* =========================================================
   LASSO
   ========================================================= */
#lasso {
  position: absolute;
  border: 1.5px dashed var(--accent);
  background: rgba(91,108,255,0.08);
  pointer-events: none;
  z-index: 50;
  border-radius: 3px;
}

/* =========================================================
   CONTEXT MENU
   ========================================================= */
.context-menu {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  min-width: 220px;
  z-index: 200;
  font-size: 13px;
}
.context-menu[hidden] { display: none; }
.context-menu > div {
  padding: 7px 12px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
  border-radius: var(--radius-sm);
}
.context-menu > div:hover { background: var(--panel-hover); }
.context-menu > div.danger { color: var(--danger); }
.context-menu > div span { font-size: 11px; color: var(--text-muted); }
.context-menu > .sep { height: 1px; padding: 0; margin: 4px 6px; background: var(--border); cursor: default; }
.context-menu > .sep:hover { background: var(--border); }
.context-menu .menu-section-label {
  padding: 4px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  cursor: default;
  font-weight: 600;
}
.context-menu .menu-section-label:hover { background: transparent; }

/* Edge interaction */
#edges path { cursor: grab; transition: stroke-width 0.12s, opacity 0.2s; }
#edges path:active { cursor: grabbing; }
/* Thicken the visible dây when the cursor is anywhere over its grab-zone */
#edges path.edge-hit:hover + path { stroke-width: 5px; }

/* "Đơn giản" preset — plain outlined boxes + thin straight connectors (flowchart look) */
#canvas-wrap.flat .node {
  background: var(--panel) !important;
  border-style: solid !important;
  border-width: 1.6px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  background-image: none !important;
}
#canvas-wrap.flat .node.root { border-width: 2.2px !important; }
#canvas-wrap.flat #edges path { stroke-width: 1.4px !important; }

/* "Cây chữ" preset — leaf nodes are plain text (no box); branches stay as
   filled pills; elbow connectors. Like a clean outline / logic tree. */
#canvas-wrap.outline .node.leaf {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 2px 4px !important;
}
#canvas-wrap.outline .node:not(.leaf):not(.root) {
  background-image: none !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
}
#canvas-wrap.outline #edges path { stroke-width: 2px !important; }

/* "Chỉ chữ" preset — no boxes anywhere; every node is plain text joined by
   thin connector lines. The root just gets a heavier weight so it still reads
   as the centre. */
#canvas-wrap.ghost .node {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
}
#canvas-wrap.ghost .node.root {
  font-weight: 800 !important;
  font-size: 19px !important;
}
#canvas-wrap.ghost #edges path { stroke-width: 1.6px !important; }

/* "Gạch màu" preset — no box; the node's colour becomes an underline bar under
   the text. We only override the top/left/right borders so the bottom border
   keeps the per-node inline colour. */
#canvas-wrap.band .node {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-style: solid !important;
  border-width: 0 0 3px 0 !important;
  border-top-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  padding: 3px 4px !important;
}
#canvas-wrap.band .node.root {
  border-bottom-width: 4px !important;
  font-weight: 800 !important;
}
#canvas-wrap.band #edges path { stroke-width: 1.8px !important; }

/* "Phác thảo" preset — sketchy hand-drawn boxes: dashed borders, an uneven
   corner radius and a hard offset shadow like a marker doodle. */
#canvas-wrap.hand .node {
  background: var(--panel) !important;
  background-image: none !important;
  border-style: dashed !important;
  border-width: 2px !important;
  border-radius: 14px 9px 16px 8px !important;
  box-shadow: 2px 3px 0 rgba(0,0,0,0.14) !important;
}
#canvas-wrap.hand .node.root { border-radius: 16px 10px 18px 9px !important; border-width: 2.5px !important; }
#canvas-wrap.hand #edges path { stroke-width: 2px !important; stroke-linecap: round !important; }

/* ============================================================
   6 preset theo ngành. Mỗi nút phơi màu của nó qua --nc (đặt inline khi
   render), nên CSS đọc được để tô viền/nền/bóng theo màu từng nút.
   ============================================================ */

/* 1. "Công sở" — nền trắng, viền mảnh + dải màu bên trái, bo nhẹ, bóng nhẹ.
   Hợp org chart / báo cáo. */
#canvas-wrap.corp .node {
  background: var(--panel) !important;
  background-image: none !important;
  border: 1px solid rgba(0,0,0,0.14) !important;
  border-left: 4px solid var(--nc) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
}
#canvas-wrap.corp .node.root {
  border-left-width: 6px !important;
  font-weight: 700 !important;
}
#canvas-wrap.corp #edges path { stroke-width: 1.5px !important; }

/* 2. "Kỹ thuật" — blueprint nền xanh đậm, lưới sáng, nút tối chữ mono. */
#canvas-wrap.blueprint {
  background: #0d1b2e !important;
  background-color: #0d1b2e !important;
}
#canvas-wrap.blueprint[data-bg="dots"] {
  background-image: radial-gradient(rgba(150,185,230,0.25) 1px, transparent 1px) !important;
}
#canvas-wrap.blueprint[data-bg="grid"],
#canvas-wrap.blueprint[data-bg="lines"] {
  background-image:
    linear-gradient(rgba(150,185,230,0.22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(150,185,230,0.22) 1px, transparent 1px) !important;
}
#canvas-wrap.blueprint .node {
  background: rgba(13,27,46,.88) !important;
  background-image: none !important;
  border: 1.4px solid var(--nc) !important;
  border-radius: 2px !important;
  color: #d7e5f7 !important;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace !important;
  box-shadow: none !important;
}
#canvas-wrap.blueprint .node.root { border-width: 2px !important; font-weight: 700 !important; }
#canvas-wrap.blueprint #edges path { stroke: rgba(150,185,230,0.6) !important; }
#canvas-wrap.blueprint #edges .edge-label { fill: #d7e5f7 !important; }
#canvas-wrap.blueprint #edges .edge-label-bg { fill: #0d1b2e !important; fill-opacity: 0.9 !important; }

/* 3. "Giấy note" — sticky vàng, dải băng dính màu nút ở trên, bóng cứng. */
#canvas-wrap.sticky .node {
  background: #fef9c3 !important;
  background-image: none !important;
  border-style: solid !important;
  border-color: var(--nc) !important;
  border-width: 4px 0 0 0 !important;
  border-radius: 2px !important;
  color: #422006 !important;
  box-shadow: 2px 4px 10px rgba(0,0,0,0.18) !important;
}
#canvas-wrap.sticky .node.root { background: #fde68a !important; font-weight: 700 !important; }
#canvas-wrap.sticky #edges path { stroke-width: 1.8px !important; }

/* 4. "Neon tối" — nền đen, nút phát sáng theo màu nút. */
#canvas-wrap.neon {
  background: #0a0a14 !important;
  background-color: #0a0a14 !important;
}
#canvas-wrap.neon .node {
  background: rgba(12,12,24,.92) !important;
  background-image: none !important;
  border: 1.4px solid var(--nc) !important;
  border-radius: 10px !important;
  color: #eceafe !important;
  box-shadow: 0 0 10px var(--nc) !important;
}
#canvas-wrap.neon .node.root { box-shadow: 0 0 20px var(--nc) !important; font-weight: 700 !important; }
#canvas-wrap.neon #edges .edge-label { fill: #eceafe !important; }
#canvas-wrap.neon #edges .edge-label-bg { fill: #0a0a14 !important; fill-opacity: 0.9 !important; }

/* 5. "In ấn" — ép trắng đen tuyệt đối; shorthand !important đè cả borderColor
   inline của từng nút. */
#canvas-wrap.mono {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
}
#canvas-wrap.mono .node {
  background: #fff !important;
  background-image: none !important;
  border: 1.5px solid #111 !important;
  border-radius: 0 !important;
  color: #111 !important;
  box-shadow: none !important;
}
#canvas-wrap.mono .node.root { border-width: 3px !important; font-weight: 700 !important; }
#canvas-wrap.mono #edges path { stroke: #111 !important; }

/* 6. "Pastel" — pill mềm không viền, nền pha loãng từ màu nút. */
#canvas-wrap.pastel .node {
  background: color-mix(in srgb, var(--nc) 20%, #fff) !important;
  background-image: none !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10) !important;
}
#canvas-wrap.pastel .node.root {
  background: color-mix(in srgb, var(--nc) 32%, #fff) !important;
  font-weight: 700 !important;
}
#canvas-wrap.pastel #edges path { stroke-width: 2.4px !important; opacity: 0.55 !important; }

#edges .edge-label { fill: var(--text-soft); font-size: 11px; font-family: 'Inter', sans-serif; font-weight: 500; pointer-events: none; }
#edges .edge-label-bg { fill: var(--panel); fill-opacity: 0.95; pointer-events: none; }

/* =========================================================
   MODAL
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(8,12,28,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.modal[hidden] { display: none; }
.modal-content {
  background: var(--panel);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 480px;
  max-height: 80vh;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-header h3 { margin: 0; font-size: 15px; font-weight: 700; }
.modal-body { padding: 18px; overflow-y: auto; }
.modal-body input[type="text"],
.modal-body input[type="url"],
.modal-body input[type="number"],
.modal-body textarea,
.modal-body select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  color: var(--text);
  font-size: 14px;
}
.modal-body textarea { min-height: 110px; resize: vertical; }
.modal-body label { display: block; font-size: 12px; color: var(--text-soft); margin-bottom: 4px; margin-top: 10px; font-weight: 500; }
.modal-body label:first-child { margin-top: 0; }
.modal-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }

.icon-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.icon-grid button { font-size: 20px; padding: 8px 6px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.icon-grid button:hover { background: var(--accent); transform: scale(1.05); }

.tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.tag-chip {
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  color: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.tag-chip .x { opacity: 0.7; cursor: pointer; }
.tag-chip .x:hover { opacity: 1; }

/* =========================================================
   PRESENTATION
   ========================================================= */
.present-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 400;
}
.present-overlay > * { pointer-events: auto; }
.present-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.5);
  color: white;
  font-size: 28px;
  border: none;
  cursor: pointer;
}
.present-nav { left: 24px; }
.present-nav.right { left: auto; right: 24px; }
.present-exit {
  position: absolute;
  top: 16px; right: 16px;
  padding: 8px 14px;
  background: rgba(0,0,0,0.55);
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.present-info {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
}

/* =========================================================
   WELCOME
   ========================================================= */
.welcome {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.05);
  z-index: 60;
}
.welcome-card {
  background: var(--panel);
  border-radius: var(--radius-lg);
  padding: 36px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  max-width: 380px;
}
.welcome-card h2 { margin: 0 0 8px; }
.welcome-card p { color: var(--text-muted); margin: 0 0 24px; }
.welcome-actions { display: flex; gap: 10px; justify-content: center; }

/* =========================================================
   TOAST
   ========================================================= */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--text);
  color: var(--panel);
  padding: 10px 18px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow);
  z-index: 500;
  opacity: 0;
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast[hidden] { display: none; }

/* =========================================================
   PRINT
   ========================================================= */
@media print {
  #topbar, #sidebar, #selToolbar, .fab, #minimap, #welcome { display: none !important; }
  #canvas-wrap { background: white !important; background-image: none !important; }
  body { background: white; }
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* =========================================================
   ACCOUNT WIDGET (Google sign-in / signed-in avatar)
   ========================================================= */
.account-wrap { position: relative; display: flex; align-items: center; }
#signInBtn { display: inline-flex; align-items: center; gap: 4px; }
#accountBtn {
  width: 32px; height: 32px;
  border-radius: 50%;
  padding: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent);
  color: white;
  font-weight: 700;
  border: 1px solid var(--border);
}
#accountBtn img { width: 100%; height: 100%; object-fit: cover; }
#accountMenu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
}
#accountMenu .dropdown-header {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
#accountMenu .dropdown-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
#accountMenu div[data-action] {
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}
#accountMenu div[data-action]:hover { background: var(--panel-hover); }

/* =========================================================
   MOBILE / TOUCH RESPONSIVE
   ========================================================= */
#canvas-wrap { touch-action: none; }

@media (max-width: 900px) {
  /* Use dynamic viewport so the iOS Safari address bar doesn't crop us */
  #app { height: 100dvh; height: 100vh; }

  #topbar {
    padding: 6px 8px;
    gap: 6px;
    height: auto;
    min-height: 44px;
    flex-wrap: nowrap;
  }
  #topbar .brand { flex-shrink: 0; }
  #topbar .map-title-wrap { flex: 1 1 0; min-width: 0; }
  #topbar .map-title-wrap input {
    font-size: 14px;
    max-width: none;
    min-width: 0;
  }
  #topbar .save-status { display: none; }
  #topbar .top-actions {
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 2px;
  }
  /* Hide less-essential buttons on phones — keep undo/redo/fit/account */
  #focusBtn, #presentBtn, #minimapBtn, #themeBtn,
  #toolHand, #toolSelect, #zoomLabel,
  #zoomIn, #zoomOut, #searchBtn, #exportMenuBtn, #wfMenuBtn { display: none; }
  #topbar .divider { display: none; }
  #sidebarResizer { display: none; }

  #sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    width: min(320px, 86vw);
    transition: transform 0.2s;
  }
  #sidebar.collapsed { width: min(320px, 86vw); transform: translateX(-100%); }
  #sidebar:not(.collapsed) { transform: translateX(0); }

  body.sidebar-open::after {
    content: '';
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 55;
  }

  .icon-btn { min-width: 34px; min-height: 34px; }
  .sel-toolbar { font-size: 12px; padding: 4px; gap: 2px; }
  .sel-toolbar .icon-btn { min-width: 30px; min-height: 30px; }
  .sel-toolbar select, .sel-toolbar input[type="color"] { height: 28px; }
  .sel-toolbar.floating {
    max-width: calc(100vw - 12px);
    flex-wrap: wrap;
    left: 6px !important;
  }

  /* Modal becomes near-fullscreen, scrollable */
  .modal-content {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: 90dvh;
    max-height: 90vh;
  }
  .modal-body { padding: 14px; }

  #fab { width: 52px; height: 52px; font-size: 28px; bottom: 16px; right: 16px; }
  #minimap { display: none; }

  .welcome-card { max-width: calc(100vw - 24px); padding: 18px; }

  #accountMenu { right: 4px; min-width: 200px; }
}

@media (max-width: 520px) {
  .brand .logo { display: none; }
  #topbar { gap: 4px; padding: 4px 6px; }
  #topbar .map-title-wrap input { font-size: 13px; padding: 4px 6px; }
  .icon-btn { min-width: 32px; min-height: 32px; }
  .node { font-size: 13px; }
  #signInBtn { font-size: 11px; padding: 4px 6px; }
  #accountBtn { width: 28px; height: 28px; }
}

/* Touch devices: there's no hover, so hover-only affordances need to be
 * always visible and the tap targets need to be bigger. */
@media (hover: none), (pointer: coarse) {
  .node .connect-port { width: 18px; height: 18px; opacity: 0.7; }
  .node:hover .connect-port,
  .node.selected .connect-port { opacity: 0.95; }
  .node .resize-handle { width: 16px; height: 16px; }
  /* Quick-add (+) buttons aren't needed on touch — ports do the job */
  .node .quick-add { display: none; }
  /* Map list delete button: always visible, larger hit target */
  .list li .map-del {
    opacity: 1;
    padding: 10px 14px;
    font-size: 22px;
    line-height: 1;
    color: var(--danger);
    background: rgba(240,78,78,0.08);
    min-width: 44px;
    min-height: 36px;
  }
  /* Move-to-folder + folder-delete: always visible on touch, bigger target */
  .list li .map-move {
    opacity: 1;
    padding: 8px 10px;
    font-size: 18px;
    min-width: 40px;
    min-height: 36px;
  }
  .folder-del {
    opacity: 1;
    padding: 8px 12px;
    font-size: 20px;
    color: var(--danger);
    min-width: 40px;
    min-height: 34px;
  }
  /* Thêm board / thư mục con / di chuyển: luôn hiện, hơi mờ, đích chạm đủ lớn nhưng gọn. */
  .folder-add-board, .folder-add-sub, .folder-move {
    opacity: 0.6;
    padding: 8px 6px;
    font-size: 16px;
    min-width: 32px;
    min-height: 34px;
  }
  /* Tag chip × — same treatment */
  .tag-chip .x { opacity: 1; padding: 4px 6px; }
}

/* =========================================================
   WORKSPACE MODE SWITCHER (Mind map / Tasks / Notes)
   ========================================================= */
.mode-switcher {
  display: flex;
  align-items: center;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}
.mode-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  border-radius: calc(var(--radius) - 3px);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  transition: background .15s, color .15s;
}
.mode-btn:hover { background: var(--panel-hover); color: var(--text); }
.mode-btn.active {
  background: var(--panel);
  color: var(--accent);
  box-shadow: var(--shadow-sm);
}
.mode-btn svg { flex-shrink: 0; }
.mode-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  margin-left: 2px;
}

/* Mode wraps live inside workspace, take full area */
.mode-wrap {
  position: absolute;
  inset: 0;
  background: var(--bg);
  overflow: hidden;
  display: flex;
}

/* =========================================================
   TASKS MODULE
   ========================================================= */
.tasks-shell {
  display: grid;
  grid-template-columns: 240px 1fr 0;
  grid-template-rows: 100%;
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  transition: grid-template-columns .2s ease;
}
.tasks-shell:has(.tasks-editor:not([hidden])) {
  grid-template-columns: 240px 1fr 340px;
}

/* Collapsed side panel (toggled by the ☰ button in tasks/notes mode) */
.notes-shell { transition: grid-template-columns .2s ease; }
body.side-collapsed .tasks-shell { grid-template-columns: 1fr 0; }
body.side-collapsed .tasks-shell:has(.tasks-editor:not([hidden])) { grid-template-columns: 1fr 340px; }
body.side-collapsed .tasks-side { display: none; }
body.side-collapsed .notes-shell { grid-template-columns: 280px 1fr; }
body.side-collapsed .notes-side { display: none; }

.tasks-side {
  border-right: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
  padding: 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ts-section { display: flex; flex-direction: column; gap: 4px; }
.ts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.ts-add {
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}
.ts-add:hover { background: var(--panel-hover); color: var(--accent); }

.smart-list, .project-list, .tag-list, .folder-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.smart-list-item, .project-item, .tag-item, .folder-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13.5px;
  color: var(--text-soft);
  user-select: none;
  position: relative;
}
.smart-list-item:hover, .project-item:hover, .tag-item:hover, .folder-item:hover {
  background: var(--panel-hover);
  color: var(--text);
}
.smart-list-item.active, .project-item.active, .tag-item.active, .folder-item.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.sl-icon { font-size: 14px; width: 18px; text-align: center; }
.sl-name, .pname, .fname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-count, .fcount {
  font-size: 11px;
  background: var(--panel-2);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 1px 7px;
  font-weight: 600;
}
.smart-list-item.active .sl-count, .folder-item.active .fcount {
  background: var(--accent);
  color: #fff;
}
.pdot, .fdot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pdot.small { width: 8px; height: 8px; }
.pdelete, .fdel {
  background: transparent; border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  opacity: 0;
  transition: opacity .1s;
}
.project-item:hover .pdelete, .folder-item:hover .fdel { opacity: 1; }
.pdelete:hover, .fdel:hover { color: var(--danger); }
.tag-item { font-size: 12.5px; color: var(--text-muted); }
.empty-hint { color: var(--text-muted); font-size: 12px; padding: 4px 10px; font-style: italic; list-style: none; }

.pomo-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
}
.pomo-cycle { font-size: 10px; color: var(--accent); letter-spacing: 2px; }
.pomo-display {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 30px;
  font-weight: 700;
  text-align: center;
  padding: 6px 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.pomo-controls { display: flex; gap: 6px; }
.pomo-btn {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.pomo-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.pomo-btn:hover { background: var(--panel-hover); }
.pomo-btn.primary:hover { background: var(--accent-hover); }

.stats-card {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 6px;
}
.stat { text-align: center; }
.stat-num { font-size: 18px; font-weight: 700; color: var(--accent); }
.stat-lbl { font-size: 10.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }

.tasks-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg);
}
.tasks-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px 10px;
  gap: 16px;
}
.tasks-title {
  margin: 0;
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
}
.view-switcher {
  display: flex;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 2px;
}
.view-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  border-radius: calc(var(--radius) - 3px);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.view-btn:hover { background: var(--panel-hover); }
.view-btn.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-sm); }

.quick-add {
  display: flex;
  gap: 8px;
  padding: 0 28px 16px;
}
.quick-add input {
  flex: 1;
  padding: 11px 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius);
  font-size: 14px;
}
.quick-add input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.tasks-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 28px 28px;
}

/* List view */
.task-section { margin-bottom: 20px; }
.task-section.overdue .section-h { color: var(--danger); }
.section-h {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin: 6px 0 8px;
  display: flex; align-items: center; gap: 8px;
}
.section-count {
  font-size: 11px;
  background: var(--panel-2);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 1px 7px;
}
.task-rows { display: flex; flex-direction: column; gap: 2px; }

.task-row {
  display: grid;
  grid-template-columns: 30px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .12s, transform .08s;
}
.task-row:hover { background: var(--panel-hover); border-color: var(--border-strong); }
.task-row.dragging { opacity: .4; }
.task-row.done .task-text { text-decoration: line-through; color: var(--text-muted); }
.task-row.overdue { border-left: 3px solid var(--danger); }

.task-check {
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; cursor: pointer; padding: 0;
}
.check-box {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  color: var(--accent);
  transition: background .12s;
}
.task-row.done .check-box {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.check-box:hover { background: var(--accent-soft); }

.task-body { min-width: 0; }
.task-line { display: flex; align-items: center; gap: 6px; }
.task-text { font-size: 14px; color: var(--text); }
.task-badge { font-size: 11px; color: var(--text-muted); }
.task-badge.subs {
  background: var(--panel-2);
  border-radius: 8px;
  padding: 1px 6px;
}
.task-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.meta-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px;
  background: var(--panel-2);
  color: var(--text-muted);
  padding: 1px 7px;
  border-radius: 8px;
}
.meta-chip.date.today { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.meta-chip.date.overdue { color: var(--danger); background: rgba(239,68,68,0.1); font-weight: 600; }
.meta-chip.prio { font-weight: 700; }
.meta-chip.prio.p1 { background: rgba(239,68,68,0.12); color: #ef4444; }
.meta-chip.prio.p2 { background: rgba(245,158,11,0.12); color: #f59e0b; }
.meta-chip.prio.p3 { background: rgba(59,130,246,0.12); color: #3b82f6; }
.meta-chip.proj { font-weight: 500; color: var(--text-soft); }

.task-pomo, .task-del {
  background: transparent; border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}
.task-row:hover .task-pomo,
.task-row:hover .task-del { opacity: 1; }
.task-pomo:hover { color: var(--accent); background: var(--accent-soft); }
.task-del:hover { color: var(--danger); background: rgba(239,68,68,0.08); }

/* Board view */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
}
.board-col {
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 0;
}
.board-col-header {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 700;
}
.board-col-header h4 { margin: 0; flex: 1; font-size: 13px; color: var(--text); }
.col-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.col-dot.todo { background: var(--text-muted); }
.col-dot.doing { background: #f59e0b; }
.col-dot.done { background: var(--success); }
.col-count {
  font-size: 11px;
  background: var(--panel-2);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 1px 7px;
}
.board-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 60px;
}
.board-col-body.drag-over { background: var(--accent-soft); }
.task-card {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: grab;
  transition: background .12s, transform .08s;
}
.task-card:hover { background: var(--panel-hover); }
.task-card.dragging { opacity: .4; }
.card-top { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.card-proj {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
}
.card-prio {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 8px;
}
.card-prio.p1 { background: rgba(239,68,68,0.12); color: #ef4444; }
.card-prio.p2 { background: rgba(245,158,11,0.12); color: #f59e0b; }
.card-prio.p3 { background: rgba(59,130,246,0.12); color: #3b82f6; }
.card-text { font-size: 13.5px; color: var(--text); margin-bottom: 6px; }
.card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.card-date, .card-subs, .card-tag {
  font-size: 10.5px;
  color: var(--text-muted);
  background: var(--panel-2);
  padding: 1px 6px;
  border-radius: 6px;
}
.card-date.overdue { color: var(--danger); }

/* Calendar view */
.calendar { display: flex; flex-direction: column; gap: 8px; height: 100%; }
.cal-nav {
  display: flex; align-items: center; gap: 10px;
  padding: 0 4px;
}
.cal-nav h3 { margin: 0; font-size: 16px; font-family: var(--font-headline); }
.cal-grid-h {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-dow {
  text-align: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  font-weight: 600;
  padding: 4px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(90px, 1fr);
  gap: 4px;
  flex: 1;
}
.cal-cell {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px;
  display: flex; flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  transition: background .1s;
}
.cal-cell:hover { background: var(--panel-hover); }
.cal-cell.empty { background: transparent; border: none; cursor: default; }
.cal-cell.today { border-color: var(--accent); border-width: 2px; }
.cal-cell.today .cal-day { color: var(--accent); font-weight: 700; }
.cal-day { font-size: 12px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; }
.cal-tasks { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-task {
  font-size: 10.5px;
  background: var(--accent-soft);
  color: var(--accent);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-task.p1 { background: rgba(239,68,68,0.15); color: #ef4444; }
.cal-task.p2 { background: rgba(245,158,11,0.15); color: #f59e0b; }
.cal-task.p3 { background: rgba(59,130,246,0.15); color: #3b82f6; }
.cal-more { font-size: 10px; color: var(--text-muted); padding: 0 5px; }

/* Empty state */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
  color: var(--text-muted);
}
.empty-state.small { padding: 30px 16px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.7; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--text-soft); margin-bottom: 4px; }
.empty-sub { font-size: 13px; max-width: 320px; }

/* Editor */
.tasks-editor {
  border-left: 1px solid var(--border);
  background: var(--panel);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.editor-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.editor-body {
  flex: 1; overflow-y: auto;
  padding: 16px 18px;
  display: flex; flex-direction: column; gap: 14px;
}
.editor-body textarea, .editor-body input[type=text], .editor-body input[type=date], .editor-body select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 13.5px;
  box-sizing: border-box;
}
.editor-body textarea { resize: vertical; min-height: 50px; }
.editor-body textarea:focus, .editor-body input:focus, .editor-body select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft);
}
.ed-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 8px;
}
.ed-row label {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.prio-pick { display: flex; gap: 4px; }
.prio-btn {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-soft);
}
.prio-btn.p1 { border-color: rgba(239,68,68,0.4); }
.prio-btn.p2 { border-color: rgba(245,158,11,0.4); }
.prio-btn.p3 { border-color: rgba(59,130,246,0.4); }
.prio-btn.active.p1 { background: rgba(239,68,68,0.15); color: #ef4444; }
.prio-btn.active.p2 { background: rgba(245,158,11,0.15); color: #f59e0b; }
.prio-btn.active.p3 { background: rgba(59,130,246,0.15); color: #3b82f6; }
.prio-btn.active.p4 { background: var(--panel-hover); color: var(--text); }
.seg-small { display: flex; background: var(--panel-2); border-radius: var(--radius-sm); padding: 2px; gap: 2px; }
.seg-btn {
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--text-soft);
  border-radius: calc(var(--radius-sm) - 2px);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
}
.seg-btn.active { background: var(--panel); color: var(--accent); box-shadow: var(--shadow-sm); }
.ed-section { display: flex; flex-direction: column; gap: 6px; }
.ed-section-h {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.3px;
}
.sub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sub-item {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
}
.sub-item:hover { background: var(--panel-hover); }
.sub-item input[type=text] {
  flex: 1; border: none; background: transparent; padding: 4px;
  color: var(--text); font-size: 13px;
}
.sub-item input[type=text]:focus { background: var(--bg-elev); border-radius: var(--radius-sm); }
.sub-item input[type=checkbox]:checked + input { text-decoration: line-through; color: var(--text-muted); }
.sub-del {
  background: transparent; border: none; color: var(--text-muted);
  cursor: pointer; padding: 2px 6px; font-size: 14px;
}
.sub-del:hover { color: var(--danger); }
.sub-add { display: flex; gap: 6px; }
.sub-add input { flex: 1; }
.editor-footer {
  display: flex; gap: 8px; padding-top: 6px;
}
.editor-footer button { flex: 1; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elev); cursor: pointer; font-weight: 600; }
.btn-danger { background: rgba(239,68,68,0.08) !important; color: var(--danger); border-color: rgba(239,68,68,0.3) !important; }
.btn-danger:hover { background: rgba(239,68,68,0.18) !important; }

/* =========================================================
   NOTES MODULE
   ========================================================= */
.notes-shell {
  display: grid;
  grid-template-columns: 220px 280px 1fr;
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--text);
}
.notes-side {
  border-right: 1px solid var(--border);
  background: var(--panel);
  overflow-y: auto;
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 14px;
}
.ns-section { display: flex; flex-direction: column; gap: 4px; }
.ns-toggle { cursor: pointer; user-select: none; border-radius: var(--radius-sm); }
.ns-toggle:hover { background: var(--panel-hover); }
.ns-toggle:hover .ts-title { color: var(--accent); }
.ns-toggle .ts-title { display: inline-flex; align-items: center; gap: 5px; }
.ns-caret {
  display: inline-block;
  font-size: 9px;
  width: 9px;
  color: var(--text-muted);
  transition: transform .15s ease;
}
.ns-section.collapsed .ns-caret { transform: rotate(-90deg); }
.ns-section.collapsed .folder-list,
.ns-section.collapsed .tag-list { display: none; }
.notes-mid {
  border-right: 1px solid var(--border);
  background: var(--bg-elev);
  display: flex; flex-direction: column;
  min-width: 0;
}
.nm-head {
  display: flex; gap: 6px;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.nm-head input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.nm-head input:focus { outline: none; border-color: var(--accent); }
.notes-list {
  list-style: none; margin: 0; padding: 8px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  flex: 1;
}
.note-card {
  padding: 10px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  transition: background .1s, border-color .1s;
}
.note-card:hover { background: var(--panel-hover); }
.note-card.active { background: var(--panel); border-color: var(--accent); }
.note-card-top {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px;
}
.pin { font-size: 11px; }
.note-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.note-card-snip {
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 4px;
}
.note-card-meta {
  display: flex; justify-content: space-between;
  font-size: 10.5px;
  color: var(--text-muted);
}
.ncf { font-weight: 600; }

.notes-main {
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--bg);
  overflow: hidden;
}
.note-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  border-bottom: 1px solid var(--border);
}
.note-toolbar input#noteTitle {
  flex: 1;
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 700;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.note-toolbar input#noteTitle:focus { outline: none; background: var(--panel); border-color: var(--accent); }
.note-back { display: none; } /* chỉ hiện trên mobile */
.nt-actions { display: flex; align-items: center; gap: 6px; }
.nt-actions select {
  padding: 5px 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
#notePin.active { color: var(--warning); }

.note-tagbar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.tb-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.4px; }
.note-tagbar input {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-soft);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
}
.note-tagbar input:focus { outline: none; background: var(--bg-elev); border-color: var(--border); }

/* Paper toolbar — chỉnh phông chữ & màu giấy */
.note-paperbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 7px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.pb-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); }
.pb-select {
  padding: 4px 8px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 12px;
}
.pb-select:focus { outline: none; border-color: var(--accent); }
.pb-size { display: inline-flex; align-items: center; gap: 2px; }
.pb-size #paperSizeVal { min-width: 22px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.pb-step, .pb-toggle {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12px; font-weight: 600;
  line-height: 1;
}
.pb-step:hover, .pb-toggle:hover { background: var(--panel-hover); }
.pb-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pb-lead { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); }
.pb-lead input[type="range"] { width: 70px; accent-color: var(--accent); }
.pb-sep { width: 1px; height: 18px; background: var(--border); }
.pb-colors { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pb-swatch {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.18);
  cursor: pointer;
  padding: 0;
  position: relative;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
}
.pb-swatch.active { box-shadow: 0 0 0 2px var(--bg-elev), 0 0 0 4px var(--accent); }
.pb-custom {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; overflow: hidden;
  background: var(--bg-elev);
}
.pb-custom input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; border: none; padding: 0;
}

.note-pane {
  flex: 1;
  display: grid;
  min-height: 0;
  gap: 22px;
  padding: 22px;
  background: var(--bg-elev);
  overflow: auto;
}
.note-pane.view-edit { grid-template-columns: 1fr; }
.note-pane.view-edit .note-preview { display: none; }
.note-pane.view-preview { grid-template-columns: 1fr; }
.note-pane.view-preview .note-editor { display: none; }
.note-pane.view-split { grid-template-columns: 1fr 1fr; }

/* The editor + preview are styled as sheets of paper */
.note-editor, .note-preview {
  height: 100%;
  min-height: 0;
  overflow: auto;
  margin: 0 auto;
  width: 100%;
  max-width: 920px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(40,30,10,0.16), 0 2px 6px rgba(40,30,10,0.10);
  background-color: var(--paper-bg, #fbf7ec);
  color: var(--paper-ink, #2b2722);
  font-family: var(--paper-font, var(--font-node));
  font-size: var(--paper-size, 19px);
  line-height: var(--paper-leading, 1.85);
  padding: 56px clamp(28px, 7%, 80px);
}
/* In split view, sheets are narrower — keep a comfortable reading column */
.note-pane.view-split .note-editor,
.note-pane.view-split .note-preview { padding: 40px clamp(24px, 5%, 48px); }
.note-editor {
  border: 1px solid rgba(0,0,0,0.10);
  resize: none;
  outline: none;
  caret-color: var(--accent);
}
.note-editor::placeholder { color: var(--paper-ink, #2b2722); opacity: 0.4; }
.note-preview { display: block; }
/* Ruled-paper lines aligned to the line-height */
.note-pane.paper-lines .note-editor,
.note-pane.paper-lines .note-preview {
  background-image: repeating-linear-gradient(
    var(--paper-bg, #fbf7ec),
    var(--paper-bg, #fbf7ec) calc(var(--paper-leading, 1.85) * var(--paper-size, 19px) - 1px),
    rgba(80,110,170,0.22) calc(var(--paper-leading, 1.85) * var(--paper-size, 19px))
  );
  background-attachment: local;
  background-position: 0 56px;
}
.note-preview h1, .note-preview h2, .note-preview h3, .note-preview h4 {
  font-family: inherit;
  font-weight: 700;
  margin: 1em 0 0.4em;
  color: var(--paper-ink, #2b2722);
}
.note-preview h1 { font-size: 1.65em; border-bottom: 1px solid rgba(0,0,0,0.15); padding-bottom: 6px; }
.note-preview h2 { font-size: 1.35em; }
.note-preview h3 { font-size: 1.12em; }
.note-preview p { margin: 0.5em 0; }
.note-preview code {
  background: rgba(0,0,0,0.06);
  color: var(--paper-ink, #2b2722);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 0.92em;
}
.note-preview pre.md-pre {
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: var(--radius);
  padding: 12px 14px;
  overflow-x: auto;
}
.note-preview pre.md-pre code { background: transparent; padding: 0; }
.note-preview blockquote {
  border-left: 3px solid var(--accent);
  margin: 0.5em 0;
  padding: 4px 12px;
  color: var(--paper-ink, #2b2722);
  opacity: 0.82;
  background: rgba(0,0,0,0.04);
}
.note-preview ul, .note-preview ol { padding-left: 22px; }
.note-preview a { color: var(--accent); text-decoration: underline; }
.note-preview hr { border: none; border-top: 1px solid rgba(0,0,0,0.15); margin: 16px 0; }
.note-preview .md-task { padding: 2px 0; }
.note-preview .md-task.done { text-decoration: line-through; opacity: 0.7; }
.note-preview .wikilink {
  cursor: pointer;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 4px;
  text-decoration: none;
}
.note-preview .wikilink:hover { background: var(--accent); color: #fff; }
.note-preview .wikilink.broken { color: var(--danger); background: rgba(239,68,68,0.08); border: 1px dashed rgba(239,68,68,0.4); }

.note-foot {
  display: flex; justify-content: space-between;
  padding: 6px 22px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  font-size: 11px;
  color: var(--text-muted);
}
.backlinks {
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--panel);
  max-height: 160px;
  overflow-y: auto;
}
.backlinks h4 {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
}
.backlinks ul { list-style: none; padding: 0; margin: 0; }
.bl-item {
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--accent);
}
.bl-item:hover { background: var(--panel-hover); }

/* =========================================================
   RESPONSIVE — Tasks/Notes on mobile
   ========================================================= */
@media (max-width: 900px) {
  .mode-btn span:not(.mode-badge) { display: none; }
  .tasks-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .tasks-shell:has(.tasks-editor:not([hidden])) { grid-template-columns: 1fr; }
  .tasks-side {
    flex-direction: row;
    overflow-x: auto;
    padding: 8px;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .ts-section { flex-shrink: 0; min-width: 120px; }
  .pomo-card, .stats-card { display: none; }
  .tasks-editor {
    position: absolute; inset: 0; z-index: 50; border-left: none;
  }
  /* Notes on mobile: single column. Show the list; when a note is open,
     the editor takes over full-screen with a ‹ back button. */
  .notes-shell { grid-template-columns: 1fr; }
  .notes-side { display: none; }
  .notes-mid { display: flex; border-right: none; }
  .notes-main { display: none; }
  .notes-shell:has(.note-toolbar) .notes-mid { display: none; }
  .notes-shell:has(.note-toolbar) .notes-main { display: flex; }
  .note-back { display: inline-flex; font-size: 22px; line-height: 1; padding: 2px 8px; }

  .note-toolbar { padding: 10px 12px; gap: 6px 8px; flex-wrap: wrap; }
  .note-toolbar input#noteTitle { font-size: 18px; }
  .nt-actions { flex-wrap: wrap; width: 100%; justify-content: flex-start; }
  .nt-actions select#noteFolder { max-width: 130px; }
  .note-tagbar { padding: 6px 12px; }
  .note-paperbar { padding: 7px 10px; gap: 7px; }

  /* Full-bleed paper for maximum reading width on small screens */
  .note-pane { padding: 0; gap: 0; background: var(--paper-bg, #fbf7ec); }
  .note-pane.view-split { grid-template-columns: 1fr; }
  .note-pane.view-split .note-preview { display: none; }
  .note-editor, .note-preview,
  .note-pane.view-split .note-editor,
  .note-pane.view-split .note-preview {
    max-width: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 22px clamp(16px, 5%, 26px);
  }
  .note-foot, .backlinks { padding-left: 14px; padding-right: 14px; }
  .board { grid-template-columns: 1fr; }
  .cal-grid { grid-auto-rows: minmax(60px, 1fr); }
}

/* Dark theme tweaks for color contrast */
[data-theme="dark"] .meta-chip.prio.p1,
[data-theme="dark"] .card-prio.p1,
[data-theme="dark"] .prio-btn.active.p1 { background: rgba(239,68,68,0.22); }
[data-theme="dark"] .meta-chip.prio.p2,
[data-theme="dark"] .card-prio.p2 { background: rgba(245,158,11,0.22); }
[data-theme="dark"] .meta-chip.prio.p3,
[data-theme="dark"] .card-prio.p3 { background: rgba(59,130,246,0.22); }


/* =========================================================
   REPO MINDMAP — tab MY MAP / REPO MINDMAP
   Giao diện tối kiểu Understand-Anything (Egonex-AI)
   ========================================================= */
.map-tabs {
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 4px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow);
  z-index: 60;
}
.map-tab {
  border: none; background: transparent;
  color: var(--text-soft);
  font: 600 12px var(--font-ui);
  letter-spacing: .04em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.map-tab:hover { background: var(--panel-hover); color: var(--text); }
.map-tab.active { background: var(--accent); color: #fff; }

body.repo-tab #sidebar { display: none; }
body.repo-tab #topbar .map-title-wrap,
body.repo-tab #topbar .top-actions { visibility: hidden; }
body.repo-tab .map-tabs {
  background: #17130e;
  border-color: #2c251b;
  box-shadow: 0 6px 24px rgba(0,0,0,0.5);
}
body.repo-tab .map-tab { color: #9a8f7d; }
body.repo-tab .map-tab:hover { background: #241e16; color: #e8e0d2; }
body.repo-tab .map-tab.active { background: #d4a574; color: #171310; }

/* ---- Bảng màu UA (nền tối ấm, accent amber #d4a574) ---- */
#repomap-wrap {
  z-index: 5;
  --ua-bg: #0e0c09;
  --ua-bg-canvas: #171310;
  --ua-panel: #12100c;
  --ua-card: #14110d;
  --ua-border: #292217;
  --ua-border-soft: #221c13;
  --ua-text: #f0e9dc;
  --ua-text-soft: #a3988a;
  --ua-text-muted: #7a6f5e;
  --ua-accent: #d4a574;
  --ua-edge: #6b5f4d;
  background: var(--ua-bg);
}
.rm-shell {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  background: var(--ua-bg);
  color: var(--ua-text);
  font-family: var(--font-ui);
  padding-top: 50px; /* chừa chỗ cho .map-tabs */
}

/* ---- Navbar ---- */
.rm-nav {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 10px 18px;
  background: var(--ua-bg);
  border-bottom: 1px solid var(--ua-border-soft);
}
.rm-logo {
  font: 700 19px 'Lora', serif;
  letter-spacing: .01em;
  color: var(--ua-text);
  white-space: nowrap;
  margin-right: 4px;
}
.rm-nav input[type="text"] {
  flex: 0 1 300px; min-width: 180px;
  padding: 7px 12px;
  border: 1px solid var(--ua-border);
  border-radius: 8px;
  background: var(--ua-card);
  color: var(--ua-text);
  font: 500 12.5px var(--font-ui);
}
.rm-nav input[type="text"]::placeholder { color: var(--ua-text-muted); }
.rm-btn-primary {
  border: none;
  background: var(--ua-accent);
  color: #171310;
  font: 700 12px var(--font-ui);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
}
.rm-btn-primary:hover { filter: brightness(1.08); }
.rm-btn-primary:disabled { opacity: .55; cursor: default; }
.rm-btn-icon {
  border: 1px solid var(--ua-border);
  background: var(--ua-card);
  border-radius: 8px;
  padding: 6px 9px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}
.rm-btn-icon.has-token { border-color: var(--ua-accent); box-shadow: 0 0 0 1px var(--ua-accent) inset; }
.rm-pill {
  border: 1px solid var(--ua-border);
  background: var(--ua-card);
  color: var(--ua-text-soft);
  font: 700 11px var(--font-ui);
  letter-spacing: .03em;
  padding: 6px 13px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.rm-pill.active { background: var(--ua-accent); border-color: var(--ua-accent); color: #171310; }

.rm-layer-chips { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.rm-chip-layer {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: transparent;
  color: #b5aa97;
  font: 600 11.5px var(--font-ui);
  padding: 5px 9px;
  border-radius: 7px;
  cursor: pointer;
  white-space: nowrap;
}
.rm-chip-layer:hover { background: #1c1712; }
.rm-chip-layer.off { opacity: .35; }
.rm-chip-layer .rm-chip-n { color: var(--ua-text-muted); font-weight: 500; }
.rm-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}

/* ---- Search ---- */
.rm-searchrow {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 18px;
  background: var(--ua-bg);
  border-bottom: 1px solid var(--ua-border-soft);
  color: var(--ua-text-muted);
}
.rm-searchrow input {
  flex: 1;
  padding: 9px 13px;
  border: 1px solid var(--ua-border);
  border-radius: 10px;
  background: var(--ua-card);
  color: var(--ua-text);
  font: 500 13px var(--font-ui);
}
.rm-searchrow input::placeholder { color: var(--ua-text-muted); }
.rm-searchmode {
  font: 700 11px var(--font-ui);
  color: var(--ua-accent);
  background: #241d13;
  border-radius: 7px;
  padding: 5px 11px;
}

/* ---- Token ---- */
.rm-token-row {
  padding: 8px 18px;
  border-bottom: 1px solid var(--ua-border-soft);
  background: var(--ua-panel);
}
.rm-token-row input {
  width: min(520px, 100%);
  padding: 7px 11px;
  border: 1px solid var(--ua-border);
  border-radius: 8px;
  background: var(--ua-card);
  color: var(--ua-text);
  font: 500 12px var(--font-ui);
}
.rm-token-row .hint {
  display: block;
  margin-top: 5px;
  font: 400 11px var(--font-ui);
  color: var(--ua-text-muted);
}

/* ---- Body: canvas + sidebar phải ---- */
.rm-body { flex: 1; display: flex; min-height: 0; }
.rm-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--ua-bg-canvas);
  background-image: radial-gradient(rgba(212,165,116,0.05) 1px, transparent 1.2px);
  background-size: 26px 26px;
  cursor: grab;
}
.rm-canvas.grabbing { cursor: grabbing; }
/* Lớp bọc DUY NHẤT nhận transform khi pan/zoom → trình duyệt tạo 1 layer
   riêng và tăng tốc bằng GPU (không vẽ lại SVG/HTML mỗi khung hình) */
#rmViewport {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform;
  backface-visibility: hidden;
}
#rmSvg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
#rmNodeLayer { position: absolute; left: 0; top: 0; }

/* Hộp cụm layer */
.rm-cluster rect {
  fill: rgba(212,165,116,0.035);
  stroke: var(--lc, #d4a574);
  stroke-opacity: .3;
  stroke-width: 1.2;
}
.rm-cluster text {
  font: 700 13px var(--font-ui);
  fill: #c9bda8;
  letter-spacing: .02em;
}
.rm-cluster .rm-cl-count { fill: #7a6f5e; font-weight: 500; }

/* Cạnh import */
.rm-edge path {
  fill: none;
  stroke: var(--ua-edge);
  stroke-width: 1.1;
  opacity: .5;
  color: var(--ua-edge);
}
.rm-edge text {
  font: 500 9px var(--font-ui);
  fill: #7a6e5a;
  opacity: .75;
  text-anchor: middle;
}
.rm-edge.dim { opacity: .12; }
.rm-edge.sel path { stroke: var(--ua-accent); color: var(--ua-accent); stroke-width: 1.8; opacity: .95; }
.rm-edge.sel text { fill: var(--ua-accent); }
.rm-edge.hl path { stroke: #e0b567; color: #e0b567; stroke-width: 2; opacity: 1; }
.rm-edge.hl text { fill: #e0b567; }

/* Card file (kiểu node React Flow của UA) */
.rm-card {
  position: absolute;
  width: 190px; height: 84px;
  box-sizing: border-box;
  background: var(--ua-card);
  border: 1px solid var(--ua-border);
  border-left: 3px solid var(--lc, var(--ua-accent));
  border-radius: 7px;
  padding: 8px 10px 8px 11px;
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow .12s ease, opacity .15s ease, border-color .12s ease;
}
.rm-card:hover { box-shadow: 0 0 0 1px var(--lc, var(--ua-accent)), 0 8px 22px rgba(0,0,0,0.45); }
.rm-card.selected { box-shadow: 0 0 0 2px var(--lc, var(--ua-accent)), 0 10px 26px rgba(0,0,0,0.5); border-color: var(--lc); }
.rm-card.hl { box-shadow: 0 0 0 2px #e0b567, 0 10px 26px rgba(0,0,0,0.5); border-color: #e0b567; }
.rm-card.dim { opacity: .18; }
.rm-card-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 3px;
}
.rm-card-type {
  font: 700 8.5px 'JetBrains Mono', monospace;
  letter-spacing: .12em;
  color: var(--lc, var(--ua-accent));
}
.rm-card-cx {
  font: 500 8.5px 'JetBrains Mono', monospace;
  color: var(--ua-accent);
  opacity: .8;
}
.rm-card-name {
  font: 600 12.5px var(--font-ui);
  color: var(--ua-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rm-card-desc {
  font: 400 10px var(--font-ui);
  color: #8d8374;
  line-height: 1.45;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-all;
}

/* Zoom controls (góc trái dưới như UA) */
.rm-zoomctl {
  position: absolute;
  left: 14px; bottom: 16px;
  display: flex; flex-direction: column;
  border: 1px solid var(--ua-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ua-panel);
  z-index: 10;
}
.rm-zoomctl button {
  border: none;
  background: transparent;
  color: var(--ua-text-soft);
  width: 34px; height: 32px;
  font-size: 15px;
  cursor: pointer;
}
.rm-zoomctl button:hover { background: #1e1812; color: var(--ua-text); }
.rm-zoomctl button + button, .rm-zoomctl .rm-zoom-label { border-top: 1px solid var(--ua-border-soft); }
.rm-zoom-label {
  font: 600 10px 'JetBrains Mono', monospace;
  color: var(--ua-text-muted);
  text-align: center;
  padding: 4px 0;
  user-select: none;
}
/* Bước hiện tại trong tour — nổi bật hơn các bước cùng luồng */
.rm-card.current { box-shadow: 0 0 0 3px #e0b567, 0 12px 30px rgba(0,0,0,0.55); z-index: 3; }

/* Empty + status */
.rm-empty {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.rm-empty-card {
  background: var(--ua-panel);
  border: 1px solid var(--ua-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  padding: 30px 36px;
  max-width: 470px;
  text-align: center;
}
.rm-empty-card h2 { margin: 0 0 10px; font: 700 24px 'Lora', serif; color: var(--ua-text); }
.rm-empty-card p { margin: 0 0 8px; font: 400 13.5px var(--font-ui); color: var(--ua-text-soft); line-height: 1.6; }
.rm-empty-card .hint { color: var(--ua-text-muted); font-size: 11.5px; }
.rm-status {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  background: var(--ua-panel);
  border: 1px solid var(--ua-border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  padding: 8px 18px;
  font: 600 12px var(--font-ui);
  color: var(--ua-accent);
  white-space: nowrap;
  z-index: 11;
}

/* ---- Sidebar phải (kiểu UA) ---- */
.rm-side {
  width: 360px; flex: 0 0 360px;
  border-left: 1px solid var(--ua-border-soft);
  background: var(--ua-bg);
  overflow-y: auto;
}
.rm-ov { padding: 22px 22px 28px; }
.rm-ov-title {
  margin: 0 0 10px;
  font: 700 25px 'Lora', serif;
  color: var(--ua-text);
  word-break: break-word;
}
.rm-ov-title.small { font-size: 19px; margin-top: 8px; }
.rm-ov-desc {
  margin: 0 0 18px;
  font: 400 13.5px var(--font-ui);
  color: var(--ua-text-soft);
  line-height: 1.65;
}
.rm-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.rm-stat {
  background: var(--ua-panel);
  border: 1px solid var(--ua-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.rm-stat b {
  display: block;
  font: 700 28px var(--font-ui);
  color: var(--ua-accent);
  line-height: 1.1;
}
.rm-stat span {
  font: 600 9.5px var(--font-ui);
  letter-spacing: .14em;
  color: var(--ua-text-muted);
}
.rm-sec-label {
  font: 700 10px var(--font-ui);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ua-text-muted);
  margin: 18px 0 8px;
}
.rm-chips-row { display: flex; flex-wrap: wrap; gap: 7px; }
.rm-tag {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1c1813;
  border: 1px solid #2e281f;
  color: #cfc4b2;
  font: 600 11.5px var(--font-ui);
  padding: 4px 12px;
  border-radius: 999px;
}
.rm-analyzed {
  margin-top: 18px;
  font: 400 11.5px var(--font-ui);
  color: var(--ua-text-muted);
}
.rm-cta {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  background: transparent;
  border: 1px solid var(--ua-accent);
  border-radius: 10px;
  color: var(--ua-accent);
  font: 700 13.5px var(--font-ui);
  cursor: pointer;
  transition: background .12s ease;
}
.rm-cta:hover { background: rgba(212,165,116,0.12); }

.rm-flow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 8px 10px;
  border: 1px solid var(--ua-border);
  border-radius: 8px;
  background: var(--ua-panel);
  cursor: pointer;
  margin-bottom: 7px;
}
.rm-flow:hover { border-color: #3a3225; }
.rm-flow.active { border-color: var(--ua-accent); box-shadow: 0 0 0 1px var(--ua-accent); }
.rm-flow-step { font: 600 11.5px var(--font-ui); color: #d9cfbc; }
.rm-flow-arr { color: var(--ua-text-muted); font-size: 10px; margin: 0 2px; }
.rm-hub {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font: 500 12px var(--font-ui);
  color: #d9cfbc;
}
.rm-hub:hover { background: #1c1712; }
.rm-hub b { color: var(--ua-accent); font-size: 11px; }
.rm-back {
  border: none; background: transparent;
  color: var(--ua-text-muted);
  font: 600 12px var(--font-ui);
  padding: 0 0 10px;
  cursor: pointer;
}
.rm-back:hover { color: var(--ua-text); }
.rm-info-head { display: flex; gap: 10px; align-items: center; }
.rm-info-path {
  font: 500 11px 'JetBrains Mono', monospace;
  color: var(--ua-text-muted);
  word-break: break-all;
  margin: 4px 0 12px;
}
.rm-ref {
  font: 500 11.5px var(--font-ui);
  color: var(--ua-text-soft);
  padding: 4px 9px;
  border-radius: 7px;
  cursor: pointer;
  word-break: break-all;
}
.rm-ref:hover { background: #1c1712; color: var(--ua-text); }
.rm-gh-link {
  display: inline-block;
  margin-top: 14px;
  font: 600 12.5px var(--font-ui);
  color: var(--ua-accent);
  text-decoration: none;
}
.rm-gh-link:hover { text-decoration: underline; }

/* ---- mobile ---- */
@media (max-width: 760px) {
  .map-tabs { top: 8px; }
  .rm-shell { padding-top: 46px; }
  .rm-body { flex-direction: column; }
  .rm-side {
    width: 100%; flex: 0 0 42%;
    border-left: none;
    border-top: 1px solid var(--ua-border-soft);
  }
  .rm-nav input[type="text"] { flex: 1 1 160px; }
}

/* ---- Repo Mindmap: nút AI/tour/path, chat, code viewer, tour overlay ---- */
.rm-nav-sep { width: 1px; height: 22px; background: var(--ua-border); margin: 0 3px; }
.rm-pill#rmDescribeBtn, .rm-pill#rmChatToggle, .rm-pill#rmTourBtn, .rm-pill#rmPathBtn { font-weight: 600; }
.rm-pill#rmPathBtn.active { background: var(--ua-accent); border-color: var(--ua-accent); color: #171310; }

.rm-ai-inputs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rm-ai-inputs input {
  flex: 1 1 200px; min-width: 160px;
  padding: 7px 11px;
  border: 1px solid var(--ua-border);
  border-radius: 8px;
  background: var(--ua-card);
  color: var(--ua-text);
  font: 500 12px 'JetBrains Mono', monospace;
}
.rm-token-row code {
  background: #241d13; color: var(--ua-accent);
  padding: 1px 5px; border-radius: 4px;
  font: 500 11px 'JetBrains Mono', monospace;
}

/* Card có mô tả AI */
.rm-card-desc.ai { color: #c9beac; -webkit-line-clamp: 3; font-style: normal; }
.rm-ai-desc {
  margin: 4px 0 12px;
  padding: 9px 11px;
  background: #1a1610;
  border-left: 2px solid var(--ua-accent);
  border-radius: 0 8px 8px 0;
  font: 400 12.5px var(--font-ui);
  color: #d5cab6;
  line-height: 1.5;
}
.rm-node-actions { display: flex; gap: 8px; margin: 12px 0 4px; flex-wrap: wrap; }
.rm-mini-btn {
  border: 1px solid var(--ua-border);
  background: var(--ua-card);
  color: var(--ua-text-soft);
  font: 600 11.5px var(--font-ui);
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.rm-mini-btn:hover:not(:disabled) { background: #1e1812; color: var(--ua-text); }
.rm-mini-btn:disabled { opacity: .4; cursor: default; }

/* Card đang là nguồn path finder */
.rm-card.patha { box-shadow: 0 0 0 2px #e0b567, 0 10px 26px rgba(0,0,0,0.5); }
.rm-canvas.pathmode { cursor: crosshair; }
.rm-canvas.pathmode.grabbing { cursor: crosshair; }

/* ---- Chat panel (nổi góc phải-dưới canvas) ---- */
.rm-chat {
  position: absolute;
  right: 16px; bottom: 16px;
  width: min(400px, calc(100% - 32px));
  height: min(460px, calc(100% - 32px));
  display: flex; flex-direction: column;
  background: var(--ua-panel);
  border: 1px solid var(--ua-border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  z-index: 20;
  overflow: hidden;
}
.rm-chat-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px;
  border-bottom: 1px solid var(--ua-border-soft);
  font: 700 13px var(--font-ui);
  color: var(--ua-text);
}
.rm-chat-x {
  border: none; background: transparent;
  color: var(--ua-text-muted);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.rm-chat-x:hover { color: var(--ua-text); }
.rm-chat-log { flex: 1; overflow-y: auto; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.rm-chat-row { display: flex; }
.rm-chat-row.user { justify-content: flex-end; }
.rm-chat-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: 12px;
  font: 400 13px var(--font-ui);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.rm-chat-row.user .rm-chat-bubble { background: var(--ua-accent); color: #171310; border-bottom-right-radius: 4px; }
.rm-chat-row.ai .rm-chat-bubble { background: #201a12; color: var(--ua-text); border: 1px solid var(--ua-border); border-bottom-left-radius: 4px; }
.rm-chat-row.err .rm-chat-bubble { border-color: #7a3b2a; color: #e6b8a8; }
.rm-chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--ua-border-soft); }
.rm-chat-input textarea {
  flex: 1; resize: none;
  padding: 8px 11px;
  border: 1px solid var(--ua-border);
  border-radius: 9px;
  background: var(--ua-card);
  color: var(--ua-text);
  font: 400 13px var(--font-ui);
  max-height: 100px;
}

/* ---- Code viewer modal ---- */
.rm-code-modal {
  position: absolute; inset: 0;
  background: rgba(8,6,4,0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 80;
  padding: 24px;
}
.rm-code-box {
  width: min(1000px, 100%); height: min(85%, 100%);
  display: flex; flex-direction: column;
  background: var(--ua-bg-canvas);
  border: 1px solid var(--ua-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}
.rm-code-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ua-border-soft);
  background: var(--ua-panel);
}
.rm-code-title { font: 600 12.5px 'JetBrains Mono', monospace; color: var(--ua-accent); word-break: break-all; }
.rm-code-body {
  flex: 1; overflow: auto;
  padding: 12px 0;
  font: 400 12.5px 'JetBrains Mono', monospace;
  line-height: 1.6;
  color: #cdc3b0;
}
.rm-code-line { display: flex; white-space: pre; }
.rm-code-ln {
  flex: none; width: 52px;
  text-align: right; padding-right: 14px;
  color: #5a5142; user-select: none;
}
.rm-code-tx { flex: 1; padding-right: 16px; }

/* ---- Guided tour overlay ---- */
.rm-tour {
  position: absolute;
  left: 50%; bottom: 22px;
  transform: translateX(-50%);
  z-index: 30;
  width: min(560px, calc(100% - 32px));
}
.rm-tour-card {
  background: var(--ua-panel);
  border: 1px solid var(--ua-accent);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6);
  padding: 16px 18px;
}
.rm-tour-step { font: 700 10px var(--font-ui); letter-spacing: .12em; color: var(--ua-accent); text-transform: uppercase; }
.rm-tour-name { font: 700 17px var(--font-ui); color: var(--ua-text); margin-top: 3px; }
.rm-tour-path { font: 500 11px 'JetBrains Mono', monospace; color: var(--ua-text-muted); margin: 2px 0 8px; word-break: break-all; }
.rm-tour-desc { font: 400 13.5px var(--font-ui); color: var(--ua-text-soft); line-height: 1.55; }
.rm-tour-nav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* card bước hiện tại trong tour dùng lại .hl */

/* Kéo đổi thứ tự bước workflow (vòng 7) */
#wfDropLine {
  position: absolute; background: var(--accent, #b4482e); border-radius: 2px;
  z-index: 999; pointer-events: none; box-shadow: 0 0 6px rgba(180,72,46,.55);
}
#wfDropLine[hidden] { display: none; }
.node.wf-dragging { opacity: .9; box-shadow: var(--shadow-lg); cursor: grabbing; }
body.wf-map #nodes .node { cursor: grab; }
body.wf-map #nodes .node.dragging { cursor: grabbing; }
.context-menu [data-action].disabled { opacity: .4; pointer-events: none; }

/* =========================================================
   TOP BAR — màn hẹp (901–1320px): chuỗi tiếng Việt dài hơn + nút ngôn ngữ
   làm topbar tràn, đẩy Export/tài khoản ra ngoài màn hình. Rút gọn dần:
   nhãn mode chỉ còn icon (đã có title), bỏ "Saved", rồi bỏ zoom ± và vạch ngăn.
   ========================================================= */
#topbar .top-actions { flex-shrink: 0; }
#topbar .top-actions button { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1320px) {
  #topbar { gap: 10px; }
  #topbar .mode-btn span:not(.mode-badge) { display: none; }
  #topbar .mode-btn { padding: 6px 9px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  #topbar .save-status { display: none; }
  #topbar .top-actions .divider { margin: 0; }
  #zoomOut, #zoomIn, #zoomLabel { display: none; }
}
/* Sidebar "Bản đồ của tôi": nút "+ Thư mục" không được xuống dòng từng chữ */
.panel-header-actions { flex-shrink: 0; }
.panel-header-actions button { white-space: nowrap; }
#sidebar .panel-header { flex-wrap: wrap; row-gap: 6px; }
#sidebar .panel-header h3 { white-space: nowrap; }

/* Smart relayout: nodes glide by JS tween; no CSS transition may fight it. */
#canvas.relayouting .node { transition: none !important; }

/* Tidy button + banner */
#tidyBtn { position: relative; }
#tidyBtn .tidy-ico { font-size: 15px; line-height: 1; }
#tidyBtn .tidy-dot { display: none; position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: #e5484d; }
#tidyBtn.has-overlap .tidy-dot { display: block; }
.tidy-banner { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--panel, #fff); color: var(--text, #333); border: 1px solid var(--border, #ddd); box-shadow: 0 6px 22px rgba(0,0,0,.18); font-size: 13px; }
.tidy-banner[hidden] { display: none; }
.tidy-banner button { border: 1px solid var(--border, #ccc); background: transparent; color: inherit; border-radius: 8px; padding: 4px 10px; cursor: pointer; font: inherit; }
.tidy-banner .tb-do { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---- Level bar (Map mode) ---- */
.level-bar { position: absolute; top: 12px; left: 12px; z-index: 30; display: flex; align-items: center; gap: 2px;
  padding: 3px 4px; background: var(--panel); border: 1px solid var(--border, rgba(128,128,128,.35)); border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12); font-size: 12px; }
.level-bar[hidden] { display: none; }
.level-bar .lv-label { padding: 0 6px; opacity: .65; }
.level-bar button { border: 0; background: transparent; color: inherit; font: inherit; min-width: 24px; padding: 3px 7px; border-radius: 5px; cursor: pointer; }
.level-bar button:hover { background: rgba(128,128,128,.18); }
.level-bar button.on { background: var(--accent); color: #fff; }
.level-bar button[hidden] { display: none; }
/* Chữ nhiều dòng trong layout dạng cây/trái-phải: căn trái cho dễ đọc */
#canvas-wrap.leftalign .node { text-align: left; }