html,
body {
  background: #fff;
  color: #4b5563;
  margin: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}

.dashboard-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fafafa;
  padding: 16px 24px;
  border-bottom: 1px solid #e9ecef;
  z-index: 200;
}

.header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 150px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 40px;
  height: auto;
}

.logo span {
  font-family: "Varela Round", sans-serif !important;
  font-weight: 400;
  font-size: 20px;
}

.menu-dropdown {
  position: relative;
  margin: 0 40px 0 0;
}

:root {
  --ui-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ui-duration-sm: 180ms;
  --ui-duration-md: 260ms;
  --ui-duration-lg: 320ms;
}

::placeholder {
  font-size: 14px;
  color: #8e96a3;
}

.menu-btn {
  display: flex;
  align-items: center;
  gap: 7.5px;
  background: transparent;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  box-sizing: border-box;
  font-size: 14px;
  cursor: pointer;
}

.menu-btn {
  background-color: #E9F1FF;
  border-color: #C0D6FB;
}

.menu-btn:hover {
  background: #f1f3f5;
  border-color: #dee3e8;
}

.menu-item.active {
  background: #e9f1ff;
  border-color: #3d9eff;
}

.menu-btn:hover img {
  filter: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(747%)
    hue-rotate(191deg) brightness(97%) contrast(97%);
}

.menu-btn img {
  width: 10px;
  height: 10px;
}

.menu-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fafafa;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  list-style: none;
  padding: 7px 12px;
  margin: 0;
  min-width: 370px;
  z-index: 10;
  grid-template-columns: repeat(2, 1fr);
  display: grid;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px) scale(0.985);
  transform-origin: top left;
  transition:
    opacity var(--ui-duration-sm) ease,
    transform var(--ui-duration-md) var(--ui-ease-soft),
    visibility 0s linear var(--ui-duration-md);
}

.menu-list.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--ui-duration-sm) ease,
    transform var(--ui-duration-md) var(--ui-ease-soft),
    visibility 0s linear 0s;
}

.menu-list li a {
  display: flex;
  flex-direction: column;
  background: #fafafa;
  padding: 12px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  color: #4b5563;
  transition: all 0.2s ease;
  min-height: 75px;
}

.menu-list li a span {
  font-size: 12px;
  color: #616c7d;
  margin-top: 8px;
  line-height: 16px;
  font-weight: 400;
}

.menu-list li a:hover {
  background: #e9f1ff;
  border-color: #3d9eff;
}

.menu-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: #e9ecef;
  margin: 4px 0 4px 0;
}

.menu-inline {
  grid-column: 1 / -1;
  gap: 12px;
  display: flex;
}

.menu-list li a.menu-item--compact {
  padding: 0;
  display: inline-flex;
  border: none;
  align-items: center;
  justify-content: center;
  min-height: auto;
  background: transparent;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  color: #aeb4bd;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: underline;
}

.menu-list li a.menu-item--footer {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #fafafa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #616c7d;
  line-height: 20px;
  transition: all 0.2s ease;
  min-height: auto;
}

.menu-list li.menu-item--full {
  grid-column: 1 / -1;
}

.menu-list li.menu-item--full:last-child {
  grid-column: auto;
}

.menu-list li a.menu-item--footer:hover {
  background: #e9f1ff;
  border-color: #3d9eff;
}

.menu-list li a.menu-item--disabled,
.menu-list li a.menu-item--disabled:hover {
  color: #aeb4bd;
  background: #fafafa;
  border-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.62;
  pointer-events: none;
  text-decoration: none;
}

.menu-list > li:nth-child(n + 2):nth-child(-n + 5) {
  display: none;
}

.header-center {
  margin-left: 76px;
}

.user-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: -12px;
  width: 340px;
  background: #fff;
  border: 1px solid #E9ECEF;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  padding: 17px 17px 16px;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px) scale(0.985);
  transform-origin: top right;
  transition:
    opacity var(--ui-duration-sm) ease,
    transform var(--ui-duration-md) var(--ui-ease-soft),
    visibility 0s linear var(--ui-duration-md);
  z-index: 100;
}

.user-dropdown.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity var(--ui-duration-sm) ease,
    transform var(--ui-duration-md) var(--ui-ease-soft),
    visibility 0s linear 0s;
}

.account-dropdown {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-dropdown__profile {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-bottom: 16px;
  border-bottom: 1px solid #E9ECEF;
}

.account-dropdown__avatar {
  width: 38px;
  height: 38px;
}

.account-dropdown__identity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-dropdown__name {
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.account-dropdown__email {
  color: #8e96a3;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
}

.account-dropdown__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.account-dropdown__action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11.2px 12px;
  border: 1px solid #E9ECEF;
  border-radius: 8px;
  background: #FAFAFA;
  color: #4b5563;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.account-dropdown__action:hover {
  background: #f8fafc;
  border-color: #d7dee8;
}

.account-dropdown__icon {
  width: 24px;
  max-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.account-dropdown__action--danger {
  margin-top: 2px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  transform: translateX(-12px);
}

.search-input {
  background: #fafafa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  min-width: 454.4px;
  padding: 10px 40px 10px 12px;
  opacity: 1;
  outline: none;
  box-sizing: border-box;
  transition:
    width 0.24s ease,
    min-width 0.24s ease,
    padding 0.24s ease,
    opacity 0.18s ease,
    border-color 0.2s ease,
    background-color 0.2s ease;
}

.search-input:hover,
.search-input:focus {
  border-color: #3d9eff;
}

.search button {
  position: absolute;
  right: 12px;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
}

.search button img {
  width: 16px;
  height: auto;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  position: relative;
}

.user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin: -8px -12px;
  min-width: 280px;
  border-radius: 14px;
  border: 1px solid #e9ecef;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.user:hover {
  background: #f1f3f5;
  box-shadow: inset 0 0 0 1px #dee3e8;
}

.user-info {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 20px;
  min-width: 0;
}

.role {
  color: #8e96a3;
  font-size: 12px;
}

.dashboard-content {
  margin-top: 73px;
  height: calc(100vh - 73px);
  overflow: hidden;
  padding: 0 23px 20px 20px;
  background: #fff;
  box-sizing: border-box;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}

.knowledge-content-header[hidden] {
  display: none !important;
}


.content-header h1 {
  flex: 1 1 auto;
  min-width: 0;
  height: auto;
  min-height: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 600;
  color: #4b5563;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: normal;
}

.create-btn-top {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #3d9eff;
  color: #fff;
  border: none;
  margin-top: 20px;
  border-radius: 7px;
  padding: 9px 16px 9px 18px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}

.create-btn-top:hover {
  background: #2582df;
}

.create-btn-top img {
  width: 11.13px;
  height: 11.13px;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 56px;
}

.empty-box {
  width: 467px;
  height: 451px;
  background: url("../assets/images/icon-folder-empty.svg") center center
    no-repeat;
  background-size: contain;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 10px;
  text-align: center;
}

.empty-box h2 {
  font-size: 32px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 6px;
}

.create-span {
  font-size: 16px;
  font-weight: 400;
  color: #616c7d;
  transform: translateY(6px);
}

.modal {
  position: fixed;
  inset: 0;
  background: #00000033;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--ui-duration-md) ease,
    visibility 0s linear var(--ui-duration-lg);
  z-index: 100;
}

.modal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--ui-duration-md) ease,
    visibility 0s linear 0s;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  padding: 35px 36px;
  width: 451px;
  position: relative;
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition:
    opacity var(--ui-duration-md) ease,
    transform var(--ui-duration-lg) var(--ui-ease-soft);
  will-change: opacity, transform;
}

.modal.open .modal-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.modal-content h3 {
  font-size: 16px;
  line-height: 140%;
  font-weight: 400;
  color: #616c7d;
  margin-bottom: 5px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.account-modal.knowledge-confirm-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(17, 24, 39, 0.18);
  backdrop-filter: blur(2px);
  z-index: 2000;
}

.knowledge-confirm-modal__dialog {
  position: relative;
  width: min(424px, 100%);
  padding: 28px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.16);
}

.knowledge-confirm-modal__dialog .account-modal__title {
  margin: 0;
  color: #4b5563;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
}

.knowledge-confirm-modal__dialog .account-modal__text--delete {
  margin: 4px 0 0;
  max-width: 468px;
  color: #4b5563;
  font-size: 14px;
  line-height: 20px;
}

.knowledge-confirm-modal__dialog .account-modal__actions--delete {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.knowledge-confirm-modal__dialog .account-modal__submit--danger,
.knowledge-confirm-modal__dialog .account-modal__cancel--delete {
  min-width: 111px;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
}

.knowledge-confirm-modal__dialog .account-modal__submit--danger {
  min-width: 165px;
}

.knowledge-confirm-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.btn-primary {
  background: #3d9eff;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  cursor: pointer;
}

.btn-primary:hover {
  background: #2582df;
}

.btn-secondary {
  background: #e9ecef;
  color: #4a4a4a;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #dee3e8;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 9px;
  background: none;
  border: none;
  cursor: pointer;
}

.input-title::placeholder {
  color: #ced4da;
}

.input-title {
  background: #f7f7f8;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  line-height: 20px;
  padding: 14px 12px;
  min-width: 428px;
  outline: none;
  margin-bottom: 30px;
}

.project-layout {
  display: block;
  padding: 0 0 22px;
  height: 100%;
  min-height: 0;
  background: #fff;
  box-sizing: border-box;
}

.sidebar-buttons {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  margin-bottom: 8px;
}

.sidebar {
  position: fixed;
  top: 73px;
  left: 20px;
  width: 368px;
  height: calc(100vh - 73px - 20px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 12px;
  box-sizing: border-box;
}

.knowledge-sidebar-toggle {
  display: none;
}

.divider {
  background: #e9ecef;
  width: 1px;
  height: calc(100vh - 73px);
  position: fixed;
  top: 73px;
  left: 408px;
}

.sidebar-actions {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-direction: row;
  border-bottom: 1px solid #dee3e8;
  padding: 20px 0 18px;
  height: 44px;
}

.btn-sidebar {
  display: flex;
  gap: 6px;
  background: transparent;
  border: 1px solid #dee3e8;
  padding: 7px 13px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  max-height: 30px;
}

.btn-edit {
  padding: 8px 13px;
}

.sidebar-buttons > .btn-sidebar:first-child:not(.btn-save):not(.btn-cancel):not(.btn-edit):not(.btn-plus) {
  display: none;
}

.btn-sidebar:hover {
  background-color: #dee3e8;
}

.btn-sidebar.is-disabled,
.btn-sidebar:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sidebar.is-disabled:hover,
.btn-sidebar:disabled:hover {
  background-color: transparent;
}

.btn-sidebar svg path {
  transition: fill 0.2s ease;
}

.btn-sidebar:hover svg path {
  fill: #8e96a3;
}

.project-item {
  padding: 16px 14px;
  display: flex;
  flex-direction: row;
  gap: 8px;
  font-size: 16px;
  line-height: 140%;
  font-weight: 400;
  cursor: pointer;
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: row;
  gap: 8px;
  align-self: center;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  transform: translateX(-8px) translateY(20px);
  cursor: pointer;
  padding-bottom: 20px;
}

.project-tree-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.project-tree {
  max-height: 100%;
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #dee3e8 transparent;
}

.project-tree::-webkit-scrollbar {
  width: 4px;
}

.project-tree::-webkit-scrollbar-thumb {
  background: #dee3e8;
  border-radius: 8px;
}

.project-tree-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 12px;
  height: 40px;
  pointer-events: none;
  background: rgba(250, 250, 250, 0.6);
  backdrop-filter: blur(0.2px);
  transition: opacity 0.3s ease;
}

.project-tree.hide-overlay + .project-tree-overlay {
  opacity: 0;
}

.project-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: 412px;
  height: calc(100vh - 73px);
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  padding-right: 4px;
}

.project-content.project-content--article {
  gap: 0;
  overflow: hidden;
  padding-right: 0;
}

.project-content.project-content--article .project-header {
  flex: 0 0 auto;
}

.project-content.project-content--article .editor-body,
.project-content.project-content--article .page-content,
.project-content.project-content--article .editor-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.project-content.project-content--article .editor-wrapper {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.project-content.project-content--article .editor-body {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 12px;
  padding-right: 12px;
  padding-bottom: 96px;
  scrollbar-width: thin;
  scrollbar-color: #dee3e8 transparent;
}

.project-content.project-content--article .editor-body::-webkit-scrollbar {
  width: 4px;
}

.project-content.project-content--article .editor-body::-webkit-scrollbar-thumb {
  background: #dee3e8;
  border-radius: 8px;
}

.project-content.project-content--article .page-content {
  scrollbar-width: none;
}

.project-content.project-content--article .page-content::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.project-content.project-content--article .editor-content,
.project-content.project-content--article .page-content {
  min-height: 0;
  overflow: visible;
}

.project-content.project-content--article .article-preview-content,
.project-content.project-content--article .page-content {
  padding-bottom: 96px;
  box-sizing: border-box;
}

body.article-editor-open .project-content.project-content--article .editor-body,
body.article-editor-open .project-content.project-content--article .editor-content {
  padding-bottom: 0 !important;
}

body.article-editor-open .project-content.project-content--article .editor-content {
  min-height: 0 !important;
  margin-bottom: 0 !important;
}

body.article-editor-open .project-content.project-content--article .editor-content > p:last-child {
  margin-bottom: 0;
}

body.article-editor-open .project-content.project-content--article .editor-content > p[data-editor-trailing-paragraph="true"]:last-child {
  height: 1px;
  min-height: 1px;
  margin: 0;
  line-height: 1px;
}

.project-content.project-content--article .article-preview-content,
.project-content.project-content--article .article-preview-content p,
.project-content.project-content--article .article-preview-content li,
.project-content.project-content--article .article-preview-content h1,
.project-content.project-content--article .article-preview-content h2,
.project-content.project-content--article .article-preview-content h3,
.project-content.project-content--article .article-preview-content h4,
.project-content.project-content--article .article-preview-content h5,
.project-content.project-content--article .article-preview-content h6,
.project-content.project-content--article .article-preview-content blockquote,
.project-content.project-content--article .article-preview-content td,
.project-content.project-content--article .article-preview-content th,
.project-content.project-content--article .page-content,
.project-content.project-content--article .page-content p,
.project-content.project-content--article .page-content li,
.project-content.project-content--article .page-content h1,
.project-content.project-content--article .page-content h2,
.project-content.project-content--article .page-content h3,
.project-content.project-content--article .page-content h4,
.project-content.project-content--article .page-content h5,
.project-content.project-content--article .page-content h6,
.project-content.project-content--article .page-content blockquote,
.project-content.project-content--article .page-content td,
.project-content.project-content--article .page-content th {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.project-content.project-content--article .article-preview-content .img-menu-btn,
.project-content.project-content--article .article-preview-content .video-menu-btn,
.project-content.project-content--article .article-preview-content .img-menu-dropdown,
.project-content.project-content--article .article-preview-content .video-menu-dropdown,
.project-content.project-content--article .page-content .img-menu-btn,
.project-content.project-content--article .page-content .video-menu-btn,
.project-content.project-content--article .page-content .img-menu-dropdown,
.project-content.project-content--article .page-content .video-menu-dropdown {
  display: none !important;
}

.project-content.project-content--article .article-preview-content .highlight-block p,
.project-content.project-content--article .page-content .highlight-block p {
  line-height: normal !important;
}

.project-content.project-content--article .article-preview-content h1,
.project-content.project-content--article .page-content h1 {
  font-family: "Inter", sans-serif;
  font-size: 28px;
  font-style: normal;
  font-weight: 600;
  line-height: 36px;
  letter-spacing: 0;
  vertical-align: middle;
}

.project-content.project-content--article .article-preview-content h2,
.project-content.project-content--article .page-content h2 {
  font-family: "Inter", sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: 0;
  vertical-align: middle;
}

.project-content.project-content--article .article-preview-content h3,
.project-content.project-content--article .page-content h3 {
  font-family: "Inter", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
  vertical-align: middle;
}

.project-content.project-content--article .article-preview-content h4,
.project-content.project-content--article .page-content h4 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px;
  letter-spacing: 0;
  vertical-align: middle;
}

.project-content.project-content--article .article-preview-content h5,
.project-content.project-content--article .page-content h5 {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  vertical-align: middle;
}

.editor-loader {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  height: 100%;
  padding: 56px 36px 40px 12px;
  box-sizing: border-box;
}

.document-builder {
  width: min(860px, 100%);
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 18px;
}

.knowledge-sidebar-skeleton {
  pointer-events: none;
}

.knowledge-sidebar-skeleton__panel {
  position: relative;
  width: 100%;
  height: 44px;
  overflow: hidden;
  border-radius: 14px;
  background: #edf1f5;
  opacity: 0;
  transform: translateY(12px);
  animation:
    build-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    soft-pulse 3.6s ease-in-out infinite;
}

.knowledge-sidebar-skeleton__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: shimmer 2s linear infinite;
}

.knowledge-tree-skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 18px;
}

.knowledge-tree-skeleton__line {
  position: relative;
  height: 16px;
  width: 72%;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f5;
  opacity: 0;
  transform: translateY(12px);
  animation:
    build-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    soft-pulse 3.6s ease-in-out infinite;
}

.knowledge-tree-skeleton__line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  animation: shimmer 2s linear infinite;
}

.knowledge-tree-skeleton__line--wide {
  width: 92%;
  animation-delay: 0.08s;
}

.knowledge-tree-skeleton__line--nested {
  width: 62%;
  margin-left: 26px;
  animation-delay: 0.24s;
}

.knowledge-tree-skeleton__line--short {
  width: 54%;
  animation-delay: 0.4s;
}

.knowledge-content-skeleton .document-builder {
  margin-top: -34px;
}

.knowledge-content-skeleton .skeleton-line.title {
  margin-top: 0;
}

.skeleton-line,
.skeleton-media,
.skeleton-card,
.skeleton-table {
  position: relative;
  overflow: hidden;
  background: #edf1f5;
  opacity: 0;
  transform: translateY(12px);
  animation:
    build-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    soft-pulse 3.6s ease-in-out infinite;
}

.skeleton-line {
  height: 14px;
  border-radius: 999px;
}

.skeleton-line.title {
  width: 58%;
  height: 40px;
  margin-top: 20px;
  margin-bottom: 10px;
  animation-delay: 0s;
}

.skeleton-media {
  width: 100%;
  height: 144px;
  border-radius: 18px;
  margin-bottom: 10px;
  animation-delay: 0.18s;
}

.skeleton-line.w90 {
  width: 96%;
  animation-delay: 0.34s;
}

.skeleton-line.w75 {
  width: 82%;
  animation-delay: 0.5s;
}

.skeleton-line.w55 {
  width: 68%;
  animation-delay: 0.66s;
}

.skeleton-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.skeleton-card {
  height: 88px;
  border-radius: 16px;
}

.skeleton-card:nth-child(1) {
  animation-delay: 0.82s;
}

.skeleton-card:nth-child(2) {
  animation-delay: 0.98s;
}

.skeleton-table {
  width: 100%;
  height: 152px;
  margin-top: 10px;
  border-radius: 18px;
  animation-delay: 1.14s;
}

.skeleton-line::after,
.skeleton-media::after,
.skeleton-card::after,
.skeleton-table::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: shimmer 2s linear infinite;
}

@keyframes build-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes soft-pulse {
  0%,
  100% {
    opacity: 0.82;
  }

  50% {
    opacity: 1;
  }
}

@keyframes shimmer {
  to {
    transform: translateX(220%);
  }
}

.project-content h2 {
  font-size: 24px;
  line-height: 28px;
  font-weight: 600;
}

.project-content p {
  color: #4B5563;
  font-size: 14px;
  line-height: 20px;
  margin: 0 !important;
}

.project-image {
  margin: 8px 0;
  width: 100%;
  border-radius: 8px;
  border: 1px dashed #C0D6FB;
}

.project-title {
  align-self: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  max-width: 208px;
  padding-left: 8px;
}

.note {
  color: #616c7d;
  font-size: 16px;
  line-height: 140%;
  text-align: start;
}

.btn-plus-wrapper {
  position: relative;
}

.plus-dropdown {
  position: absolute;
  top: 16px;
  right: 0px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  list-style: none;
  padding: 6px 0;
  display: none;
  width: 148px;
  z-index: 10;
}

.plus-dropdown.show {
  display: block;
}

.dropdown-item {
  padding: 6px 10px 5px;
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
}

.dropdown-item:hover {
  background: #f1f3f5;
}

.dropdown-item.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: auto;
}

.dropdown-item.disabled:hover {
  background: transparent;
}

.icon-folder {
  width: 14px;
  height: 12px;
}

.icon-page {
  width: 12px;
  height: 13px;
  margin-right: 4px;
}

.tree-title {
  display: flex;
  align-items: center;
  gap: 11px;
  position: relative;
  box-sizing: border-box;
  height: auto !important;
  min-height: 34px;
  max-height: none;
  margin-top: 2px;
  padding: 5px 8.5px 5px 15px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  color: #4b5563;
}

.tree-name {
  outline: none;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  line-height: 20px;
  min-width: 0;
  max-height: none;
  overflow: visible;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.tree-title:hover {
  background: #e3f1ff;
}

.tree-item.active > .tree-title {
  background: #e3f1ff;
}

.arrow-icon {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.rotated {
  transform: rotate(90deg);
}

.tree-children {
  display: none;
  margin-left: 22px;
}

.tree-item.open > .tree-children {
  display: flex;
  flex-direction: column;
}

.icon-drag {
  flex: 0 0 auto;
  cursor: grab;
  opacity: 0.7;
  margin-right: 6px;
  margin-top: 2px;
}

.tree-name {
  display: block;
  flex: 1;
}

.tree-name.tree-name-placeholder {
  color: #8e96a3;
}

.tree-item.active > .tree-title .tree-name.tree-name-placeholder,
.tree-title:hover .tree-name.tree-name-placeholder {
  color: #8e96a3;
}

.tree-controls {
  display: flex;
  align-items: center;
  gap: 1px;
  flex: 0 0 auto;
  margin-top: 1px;
}

.tree-pending-cancel-btn {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  margin-top: 1px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.tree-pending-cancel-btn:hover {
  background: rgba(174, 180, 189, 0.16);
}

.tree-pending-cancel-btn svg {
  display: block;
}

.content-header h1 {
  margin: 24px 0 0 4px;
}

.edit-more-btn,
.edit-add-btn {
  cursor: pointer;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 3px;
  border: none;
  outline: none;
}

.edit-more-btn {
  padding: 10px 6px;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.edit-more-btn svg {
  display: block;
  flex-shrink: 0;
}

.edit-more-btn:hover,
.edit-add-btn:hover {
  background-color: #dee3e8;
}

.edit-add-btn svg path {
  transition: fill 0.2s ease;
}

.edit-add-btn:hover svg path {
  fill: #8e96a3;
}

.btn-save {
  padding: 7.5px;
  width: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  line-height: 15px;
  font-weight: 500;
  background: #fff;
  border: 1px solid #d1d5db;
  outline: none;
  border-radius: 4px;
  color: #4b5563;
}

.btn-close {
  padding: 2.7px 0.7px;
}

.btn-save:hover {
  background-color: #dee3e8;
}

.folder-plus-wrapper {
  position: relative;
  display: inline-block;
}

.plus-dropdown-mini {
  position: absolute;
  top: 30px;
  left: -120px !important;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  list-style: none;
  padding: 4px 0;
  margin: 0;
  display: none;
  z-index: 10;
  width: 148px;
}

.plus-dropdown-mini.show {
  display: block;
}

.plus-dropdown-mini .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.plus-dropdown-mini .dropdown-item:hover {
  background: #f0f0f0;
}

body.edit-mode .tree-title {
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

body.edit-mode .tree-title:hover {
  background-color: #f1f3f5;
}

body.edit-mode .tree-item.active > .tree-title {
  background-color: #f1f3f5;
}

.edit-more-wrapper {
  position: relative;
  display: inline-block;
}

.edit-more-wrapper .dots-dropdown {
  position: absolute;
  top: 30px;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  list-style: none;
  padding: 4px 0;
  margin: 0;
  display: none;
  z-index: 10;
  width: 188px;
}

.edit-more-wrapper .dots-dropdown.show {
  display: block;
}

.edit-more-wrapper .dots-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}

.edit-more-wrapper .dots-dropdown .dropdown-item:hover {
  background: #f1f3f5;
}

.edit-more-btn svg path {
  transition: fill 0.2s ease;
}

.edit-more-btn:hover svg path {
  fill: #8e96a3;
}

.rename-input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 2px 4px;
  width: 90%;
  outline: none;
}

.tree-drag-handle {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  flex: 0 0 24px;
}

.tree-drag-handle:active {
  cursor: grabbing;
}

.tree-drag-handle .icon-drag {
  pointer-events: none;
}


.tree-item.dragging {
  opacity: 0.5;
}

.tree-item > .tree-title {
  position: relative;
}

.tree-drag-preview {
  display: flex;
  align-items: flex-start;
  min-height: 34px;
  padding: 5px 8.5px 5px 15px;
  border: 1px solid #dce8f5;
  border-radius: 6px;
  background: #ffffff;
  color: #4b5563;
  box-shadow: 0 10px 24px rgba(31, 42, 55, 0.14);
  opacity: 0.96;
}

.tree-item.drag-insert-inside > .tree-title {
  background-color: #eaf6ff;
  border-radius: 6px;
}

body.edit-mode .tree-item.drag-insert-inside > .tree-title:hover {
  background-color: #eaf6ff;
}

body.edit-mode .tree-item.drag-insert-before > .tree-title:hover,
body.edit-mode .tree-item.drag-insert-after > .tree-title:hover {
  background-color: transparent;
}

.tree-item.drag-insert-before > .tree-title::before,
.tree-item.drag-insert-after > .tree-title::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  z-index: 2;
  height: 0;
  border-radius: 999px;
  border-top: 2px solid #9fdcff;
  box-shadow:
    0 0 0 3px rgba(159, 220, 255, 0.16),
    0 0 10px rgba(159, 220, 255, 0.5);
  pointer-events: none;
  transform-origin: center;
  animation: treeDropIndicatorIn 0.15s ease-out;
}

.tree-item.drag-insert-before > .tree-title::before {
  top: -4px;
}

.tree-item.drag-insert-after > .tree-title::after {
  bottom: -4px;
}

.tree-children.drag-over,
.project-tree.drag-over {
  background-color: transparent;
  border-radius: 4px;
}

.tree-children.drag-over::after,
.project-tree.drag-over::after {
  content: "";
  display: block;
  height: 0;
  margin: 8px 8px 6px;
  border-radius: 999px;
  border-top: 2px solid #9fdcff;
  box-shadow:
    0 0 0 3px rgba(159, 220, 255, 0.16),
    0 0 10px rgba(159, 220, 255, 0.5);
  transform-origin: center;
  animation: treeDropIndicatorIn 0.15s ease-out;
}

@keyframes treeDropIndicatorIn {
  from {
    opacity: 0;
    transform: scaleX(0.15);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.projects-grid {
  display: grid;
  justify-content: start;
  grid-template-columns: repeat(2, minmax(520px, 1fr));
  gap: 16px;
  width: 100%;
  padding: 0;
  box-sizing: border-box;
  margin: -31px 0;
}

@media (max-width: 1100px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 128px;
  padding: 0 12px 0 18px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.project-card:hover {
  border-color: #dee3e8;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

.project-card-header {
  display: flex;
  align-items: center;
  width: 100%;
}

.project-icon {
  width: 52px;
  height: auto;
}

.project-info {
  flex-grow: 1;
}

.project-name {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  color: #4b5563;
  margin-bottom: 42px;
}

.project-meta {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #616c7d;
  display: flex;
  gap: 4px;
}

.btn-favourite {
  margin: 4px 0 0 5px;
  background: none;
  border: none;
  cursor: pointer;
  align-self: flex-start;
}

.btn-favourite svg path {
  transition:
    fill 0.2s ease,
    stroke 0.2s ease;
}

.btn-favourite:hover svg path {
  fill: #aeb4bd;
  stroke: #aeb4bd;
}

.btn-favourite.is-active svg path {
  fill: #aeb4bd;
  stroke: #aeb4bd;
}

.icon-container {
  display: flex;
  background-color: #f4f8ff;
  border-radius: 6px;
  height: 100px;
  width: 100px;
  justify-content: center;
  align-items: center;
  margin-right: 16px;
}

.meta-flags,
.project-times-seen {
  display: flex;
  padding: 3px 12px;
  gap: 6px;
}

.seen-icon {
  margin-top: 4px;
}

.card-btns {
  display: flex;
  flex-direction: row;
  align-self: start;
}

.project-header {
  display: flex;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #e9ecef;
  min-height: 44px;
  padding: 0;
  box-sizing: border-box;
}

.project-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.btn-public-article-link,
.btn-public-folder-link,
.btn-open-editor {
  display: inline-block;
  background: transparent;
  color: #4b5563;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 7.5px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin: 0 0 0 auto;
  transition: background 0.2s ease;
  min-height: 32px;
  max-height: 32px;
}

.project-header-actions .btn-open-editor {
  margin-left: 0;
}

.btn-public-article-link,
.btn-public-folder-link {
  color: #3d9eff;
}

.btn-public-article-link:hover,
.btn-public-folder-link:hover,
.btn-open-editor:hover {
  background: #dee3e8;
}

.btn-public-article-link:disabled,
.btn-public-folder-link:disabled {
  cursor: default;
  opacity: 0.65;
}

.public-link-modal[hidden] {
  display: none !important;
}

.public-link-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
}

.public-link-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(19, 29, 43, 0.24);
  opacity: 0;
  transition: opacity 180ms ease;
}

.public-link-modal__dialog {
  position: relative;
  box-sizing: border-box;
  width: min(482px, calc(100vw - 24px));
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 18px 45px rgba(31, 42, 55, 0.18);
  opacity: 0;
  transform: translateY(10px) scale(0.985);
  transition: opacity 180ms ease, transform 180ms ease;
}

.public-link-modal.is-open .public-link-modal__backdrop,
.public-link-modal.is-open .public-link-modal__dialog {
  opacity: 1;
}

.public-link-modal.is-open .public-link-modal__dialog {
  transform: translateY(0) scale(1);
}

.public-link-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 8px;
  transition: background-color 0.18s ease;
}

.public-link-modal__close:hover {
  background: #F1F3F5;
}

.public-link-modal__close svg path {
  transition: stroke 0.18s ease;
}

.public-link-modal__close:hover svg path {
  stroke: #4B5563;
}

.public-link-modal__title {
  margin: 0 36px 28px 0;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #4b5563;
}

.public-link-modal__row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  color: #4B5563;
  font-size: 16px;
  line-height: 22px;
}

.public-link-toggle {
  position: relative;
  display: inline-flex;
  width: 36px;
  height: 22px;
  flex: 0 0 36px;
  cursor: pointer;
}

.public-link-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.public-link-toggle__control {
  width: 36px;
  height: 22px;
  border-radius: 999px;
  background: #d6dde7;
  transition: background-color 160ms ease;
}

.public-link-toggle__control::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  transition: transform 160ms ease;
}

.public-link-toggle input:checked + .public-link-toggle__control {
  background: #3D9EFF;
}

.public-link-toggle input:checked + .public-link-toggle__control::after {
  transform: translateX(14px);
}

.public-link-modal__field {
  position: relative;
  margin: 0 0 24px;
  width: 100%;
}

.public-link-modal__field input {
  box-sizing: border-box;
  width: 100%;
  height: 40px;
  border: 1px solid #CED4DA;
  border-radius: 6px;
  background: #fff;
  font-size: 16px;
  line-height: 1;
  padding: 0 42px 0 12px;
  outline: none;
  min-width: 0;
  color: #4b5563;
}

.public-link-modal__field input[readonly] {
  text-overflow: ellipsis;
}

.public-link-modal__field input::placeholder {
  color: #CED4DA;
}

.public-link-modal__icon-btn {
  position: absolute;
  top: 50%;
  right: 13px;
  width: 24px;
  height: 24px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 6px;
  color: #AEB4BD;
  transition: background-color 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}

.public-link-modal__icon-btn:hover {
  background: #F5F9FF;
  color: #3D9EFF;
}

.public-link-modal__icon-btn[data-public-link-toggle-password]:hover {
  background: #F5F9FF;
  color: #3D9EFF;
}

.public-link-modal__icon-btn[data-public-link-copy].is-copied,
.public-link-modal__icon-btn[data-public-link-copy].is-copied:hover {
  background: #E9F7EF;
  color: #20A464;
}

.public-link-modal__icon-btn img {
  width: 18px;
  height: 18px;
  display: block;
  opacity: 0.72;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.public-link-modal__icon-btn:hover img {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(58%) sepia(98%) saturate(1944%) hue-rotate(184deg) brightness(101%) contrast(101%);
}

.public-link-modal__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 2px;
}

.public-link-modal__save,
.public-link-modal__cancel {
  height: 40px;
  border: 0;
  border-radius: 8px;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.public-link-modal__save {
  background: #3d9eff;
  color: #fff;
}

.public-link-modal__save:hover {
  background: #2582df;
}

.public-link-modal__cancel {
  background: #f1f3f5;
  color: #4B5563;
}

.public-link-modal__cancel:hover {
  background: #E9ECEF;
  color: #374151;
}

body.public-link-modal-open {
  overflow: hidden;
}

.btn-open-editor.is-disabled,
.btn-open-editor:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-open-editor.is-disabled:hover,
.btn-open-editor:disabled:hover {
  background: transparent;
}

.page-content {
  display: flex;
  flex-direction: column;
  /* margin-top: -4px; */
  /* gap: 14px; */
  color: #4b5563;
}

.page-content h2 {
  color: #4b5563;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  padding: 12px 0 18px 2px;
}

.article-preview-title.is-placeholder,
.page-content .article-placeholder-title {
  color: #8e96a3;
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  margin: 0;
  padding: 12px 0 18px 2px;
}

.article-preview-content.is-placeholder,
.page-content .article-placeholder-text {
  color: #8e96a3;
  font-weight: 400;
  pointer-events: none;
  font-size: 14px;
}

.page-content p {
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
  padding-left: 2px;
}

@media (max-width: 900px) {
  :root {
    --mobile-header-height: 64px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    height: var(--vvh, 100dvh);
    min-height: var(--vvh, 100dvh);
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .dashboard-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: grid;
    grid-template-columns: auto minmax(40px, 1fr) 40px;
    grid-template-areas: "left search right";
    column-gap: 12px;
    row-gap: 0;
    align-items: center;
    padding: 12px 14px;
    transition: padding-bottom 0.62s cubic-bezier(0.22, 1, 0.36, 1), row-gap 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .dashboard-header.search-expanded {
    grid-template-areas:
      "left . right"
      "search search search";
    row-gap: 10px;
    padding-bottom: 14px;
  }

  .header-left {
    grid-area: left;
    min-width: 0;
    width: auto;
    gap: 12px;
  }

  .logo {
    flex: 0 0 auto;
  }

  .logo span {
    display: none;
  }

  .menu-dropdown {
    margin: 0;
    position: relative;
  }

  .menu-btn {
    height: 36px;
    min-height: 36px;
    padding: 0 9px;
    white-space: nowrap;
  }

  .menu-list {
    position: absolute;
    left: 0;
    right: auto;
    top: calc(100% + 6px);
    min-width: 0;
    width: min(320px, calc(100vw - 28px));
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    padding: 8px;
    border-radius: 10px;
    transform-origin: top center;
    z-index: 330;
  }

  .menu-list li a {
    justify-content: center;
    min-height: 30px;
    padding: 5px 8px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 17px;
  }

  .menu-list li a.menu-item--footer {
    min-height: 30px;
    padding: 5px 8px;
  }

  .menu-list li.menu-item--full:last-child {
    grid-column: auto;
  }

  .header-center {
    grid-area: search;
    margin-left: 0;
    min-width: 0;
    justify-self: end;
    width: 40px;
    transition: width 0.94s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .dashboard-header.search-expanded .header-center {
    justify-self: stretch;
    width: 100%;
  }

  .header-right {
    grid-area: right;
    justify-self: end;
    width: 40px;
    min-width: 40px;
  }

  .header-right .user {
    width: 40px;
    height: 40px;
    min-width: 40px !important;
    min-height: 40px;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-radius: 50%;
  }

  .header-right .user .avatar,
  .header-right .user img.avatar {
    width: 100%;
    height: 100%;
    min-width: 0 !important;
    min-height: 0;
    display: block;
    object-fit: cover;
    border-radius: 50%;
  }

  .search {
    width: auto;
    transform: none;
    justify-content: flex-end;
  }

  .dashboard-header.search-expanded .search {
    width: 100%;
  }

  .search-input {
    width: 0;
    min-width: 0;
    box-sizing: border-box;
    max-height: 36px;
    padding: 8px 0;
    opacity: 0;
    pointer-events: none;
    border-color: transparent;
    transform: translateY(-8px);
    transition:
      width 0.94s cubic-bezier(0.22, 1, 0.36, 1),
      padding 0.94s cubic-bezier(0.22, 1, 0.36, 1),
      opacity 0.62s ease,
      border-color 0.62s ease,
      transform 0.94s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .search.search--open {
    width: 100%;
  }

  .search.search--open .search-input {
    width: 100%;
    min-width: 0;
    padding: 8px 38px 8px 11px;
    opacity: 1;
    pointer-events: auto;
    border-color: #e9ecef;
    transform: translateY(0);
  }

  .search button {
    position: static;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    background: #fafafa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .search.search--open button {
    position: absolute;
    right: 0;
    border-color: transparent;
    background: transparent;
    pointer-events: none;
    transition: color 0.42s ease, opacity 0.42s ease;
  }

  .search.search--open button:hover,
  .search.search--open button:focus-visible {
    background: transparent;
    border-color: transparent;
  }

  .search button:hover,
  .search button:focus-visible {
    background: #f3f8ff;
    border-color: #cfe6ff;
  }

  body.knowledge-header-search-open .dashboard-content {
    padding-top: calc(var(--mobile-header-height) + 50px);
  }

  .header-right {
    grid-area: right;
    position: relative;
    width: 40px;
    min-width: 40px;
    gap: 0;
    justify-content: flex-end;
  }

   .header-right .user {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    padding: 0;
    overflow: hidden;
    border-radius: 50%;
    flex: 0 0 40px;
  }

   .header-right .user .avatar,
  .header-right .user img.avatar {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    display: block;
    object-fit: cover;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .user-info {
    display: none;
  }

  .user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    width: min(300px, calc(100vw - 28px));
    min-width: 0;
    max-height: min(70dvh, 520px);
    overflow-y: auto;
    z-index: 340;
  }

  .dashboard-content {
    max-width: 100%;
    box-sizing: border-box;
    height: var(--vvh, 100dvh);
    margin-top: 0;
    padding: var(--mobile-header-height) 14px 18px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    transition: padding-top 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .content-header {
    gap: 12px;
    margin-bottom: 16px;
    padding-top: 14px;
  }

  .content-header h1 {
    font-size: 22px;
    line-height: 30px;
  }

  .create-btn-top {
    flex: 0 0 auto;
    min-height: 38px;
    margin-top: 0;
    padding: 8px 12px;
    gap: 8px;
    font-size: 14px;
    line-height: 20px;
  }

  .dividerr,
  .divider {
    display: none;
  }

  .project-layout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
    box-sizing: border-box;
    height: auto;
    min-height: 100%;
    overflow: visible;
    padding-bottom: 18px;
  }

  .sidebar {
    --mobile-sidebar-width: min(368px, calc(100vw - 54px));
    position: fixed;
    top: 0 !important;
    bottom: 0;
    left: calc(-1 * var(--mobile-sidebar-width));
    width: var(--mobile-sidebar-width);
    box-sizing: border-box;
    height: auto;
    max-height: none;
    min-height: 0;
    gap: 12px;
    padding: 0 14px 20px;
    overflow: visible;
    border: 0;
    border-right: 1px solid #e9ecef;
    border-radius: 0;
    background: #fff;
    box-shadow: 18px 0 38px rgba(15, 23, 42, 0.08);
    transform: none;
    transition: left var(--ui-duration-lg) var(--ui-ease-soft);
    z-index: 2147483001;
  }

  body.knowledge-mobile-tree-open .sidebar {
    left: 0;
  }

  .knowledge-sidebar-backdrop {
    position: fixed;
    inset: 0;
    display: block;
    background: transparent;
    z-index: 2147483000;
    touch-action: none;
  }

  .knowledge-sidebar-backdrop[hidden] {
    display: none;
  }

  body.knowledge-mobile-tree-open .dashboard-content,
  body.knowledge-mobile-tree-open .project-layout {
    overflow: visible;
  }

  .knowledge-sidebar-toggle {
    position: absolute;
    top: 37px;
    right: -38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 54px;
    padding: 0;
    color: #4b5563;
    background: #fff;
    border: 1px solid #e9ecef;
    border-left: 0;
    border-radius: 0 12px 12px 0;
    box-shadow: 12px 0 24px rgba(15, 23, 42, 0.08);
    cursor: pointer;
    transition: color 0.2s ease, background-color 0.2s ease;
    z-index: 2147483001 !important;
  }

  .knowledge-sidebar-toggle:hover {
    color: #3d9eff;
    background: #f8fbff;
  }

  .knowledge-sidebar-toggle:disabled,
  .knowledge-sidebar-toggle[aria-disabled="true"] {
    cursor: default;
    opacity: 0.45;
    pointer-events: none;
  }

  body.knowledge-mobile-tree-open .knowledge-sidebar-toggle svg {
    transform: rotate(180deg);
  }

  .knowledge-sidebar-toggle svg {
    transition: transform var(--ui-duration-md) var(--ui-ease-soft);
  }

  .sidebar-actions {
    flex: 0 0 auto;
    align-items: flex-end;
    justify-content: space-between;
    height: 44px;
    min-height: 44px;
    padding: 20px 0 18px;
  }

  .sidebar-buttons {
    align-items: flex-end;
    justify-content: flex-start;
    gap: 5px;
    margin-bottom: 8px;
  }

  .btn-sidebar {
    align-items: center;
    justify-content: center;
    min-height: 30px;
    max-height: 30px;
    padding: 7px 13px;
    white-space: nowrap;
  }

  .btn-sidebar:not(.btn-save):not(.btn-cancel),
  .btn-sidebar.btn-plus,
  .btn-sidebar.btn-edit,
  .btn-sidebar.btn-cancel {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    max-width: 30px;
    max-height: 30px;
    padding: 0;
  }

  .project-tree-wrap {
    min-height: 0;
    padding: 0;
  }

  .project-tree {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    height: 100%;
    overflow-y: auto;
  }

  .tree-title {
    min-height: 34px;
    gap: 11px;
    padding: 5px 8.5px 5px 15px;
  }

  .tree-name {
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }

  .tree-controls {
    flex: 0 0 auto;
  }

  .plus-dropdown {
    right: 0;
    max-width: calc(100vw - 48px);
    z-index: 80;
  }

  .plus-dropdown-mini {
    left: auto !important;
    right: 0;
    max-width: calc(100vw - 48px);
    z-index: 90;
  }

  .project-tree-overlay {
    display: block;
  }

  .sidebar-footer {
    display: flex;
    margin-top: auto;
    padding-bottom: 0;
    transform: translateX(-8px);
  }

  .project-content {
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin-left: 0;
    padding: 0;
    overflow: visible;
  }

  .project-content.project-content--article {
    overflow: visible;
  }

  .project-content.project-content--article .editor-wrapper {
    overflow: visible;
  }

  .project-content.project-content--article .editor-body {
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .project-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 42px;
    gap: 8px;
    padding: 8px 0;
    background: #fff;
  }

  .btn-open-editor {
    flex: 0 0 auto;
    min-height: 34px;
    max-height: none;
    padding: 7px 10px;
  }

  .page-content,
  .editor-wrapper {
    min-width: 0;
  }

  .page-content h2,
  .article-preview-title.is-placeholder,
  .page-content .article-placeholder-title {
    font-size: 22px;
    line-height: 30px;
  }

  .project-content.project-content--article .article-preview-content,
  .project-content.project-content--article .page-content {
    overflow-wrap: anywhere;
  }

  .project-layout:has(.project-content.project-content--article) .sidebar {
    max-height: none;
    min-height: 0;
  }

  .project-layout:has(.project-content.project-content--article) .project-tree {
    max-height: 100%;
  }

  .project-layout:has(.project-content.project-content--article) .sidebar-actions {
    min-height: 44px;
    padding: 20px 0 18px;
  }

  .project-layout:has(.project-content.project-content--article) .btn-sidebar {
    min-height: 30px;
    padding: 7px 13px;
  }

  .project-layout:has(.project-content.project-content--article) .btn-sidebar:not(.btn-save):not(.btn-cancel),
  .project-layout:has(.project-content.project-content--article) .btn-sidebar.btn-plus,
  .project-layout:has(.project-content.project-content--article) .btn-sidebar.btn-edit,
  .project-layout:has(.project-content.project-content--article) .btn-sidebar.btn-cancel {
    padding: 0;
  }

  body.article-editor-open .dashboard-content {
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  body.article-editor-open .project-layout {
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  body.article-editor-open .sidebar {
    flex: 0 0 auto;
    max-height: none;
    min-height: 0;
  }

  body.article-editor-open .project-tree {
    max-height: 100%;
  }

  body.article-editor-open .project-content.project-content--article {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body.article-editor-open .project-content.project-content--article .editor-wrapper {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  body.article-editor-open .project-content.project-content--article .editor-body {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .project-content.project-content--article .editor-body { 
  padding-left: 0;
  padding-right: 0;
  }

  .projects-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .project-card {
    height: auto;
    min-height: 112px;
    padding: 14px;
  }

  .icon-container {
    width: 72px;
    height: 72px;
    margin-right: 12px;
  }

  .project-name {
    margin-bottom: 18px;
    font-size: 16px;
    line-height: 22px;
  }

  .modal {
    align-items: center;
    padding: 16px 14px;
    overflow-y: auto;
    box-sizing: border-box;
  }

  .modal-content {
    width: min(100%, 420px);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 20px !important;
    box-sizing: border-box;
  }
}

@media (max-width: 420px) {
  :root {
    --mobile-header-height: 58px;
  }

  .dashboard-header {
    grid-template-columns: auto minmax(40px, 1fr) 40px;
    padding: 10px 12px;
    column-gap: 10px;
  }

  .header-left {
    gap: 8px;
  }

  .project-content p {
    font-size: 16px;
    max-width: unset;
  }

  .logo span {
    display: none;
  }

  .menu-list {
    left: 0;
    right: auto;
    width: min(300px, calc(100vw - 24px));
    max-height: min(68dvh, 500px);
  }

  .menu-btn {
    padding: 6px 9px 5px;
  }

  .user-dropdown {
    top: calc(100% + 6px);
    left: auto;
    right: 0;
    width: min(280px, calc(100vw - 24px));
  }

  .header-right .user,
.header-right .user .avatar,
.header-right .user img.avatar {
  flex-shrink: 0;
}

  .dashboard-content {
    height: var(--vvh, 100dvh);
    margin-top: 0;
    padding: var(--mobile-header-height) 12px 16px;
     padding-right: 14px;
  }

  .sidebar {
    top: 0;
    --mobile-sidebar-width: min(368px, calc(100vw - 50px));
    padding: 0 12px 18px;
  }

  .knowledge-sidebar-toggle {
    top: 31px;
  }

  .tree-title {
    min-height: 34px;
    padding: 5px 8.5px 5px 15px;
  }

  .project-layout:has(.project-content.project-content--article) .sidebar {
    max-height: none;
  }

  body.article-editor-open .sidebar {
    max-height: none;
  }

  body.article-editor-open .project-tree {
    max-height: 100%;
  }

   .dashboard-header {
    grid-template-columns: auto minmax(0, 1fr) 40px;
    padding: 10px 12px;
    column-gap: 8px;
  }

}

@media (max-width: 768px) {
  input:not(.editor-title):not([type="button"]):not([type="checkbox"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="image"]):not([type="radio"]):not([type="range"]):not([type="reset"]):not([type="submit"]),
  textarea:not(.editor-title),
  select {
    font-size: 16px !important;
  }

  .editor-title {
    font-size: 22px !important;
  }
}