/* .icon-clipboard {
  display: inline-block;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36'%3E%3Cpath fill='%23c1694f' d='M32 34a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2h24a2 2 0 0 1 2 2z'/%3E%3Cpath fill='%23fff' d='M29 32a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h20a1 1 0 0 1 1 1z'/%3E%3Cpath fill='%23ccd6dd' d='M25 3h-4a3 3 0 1 0-6 0h-4a2 2 0 0 0-2 2v5h18V5a2 2 0 0 0-2-2'/%3E%3Ccircle cx='18' cy='3' r='2' fill='%23292f33'/%3E%3Cpath fill='%2399aab5' d='M20 14a1 1 0 0 1-1 1h-9a1 1 0 0 1 0-2h9a1 1 0 0 1 1 1m7 4a1 1 0 0 1-1 1H10a1 1 0 0 1 0-2h16a1 1 0 0 1 1 1m0 4a1 1 0 0 1-1 1H10a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1m0 4a1 1 0 0 1-1 1H10a1 1 0 1 1 0-2h16a1 1 0 0 1 1 1m0 4a1 1 0 0 1-1 1h-9a1 1 0 1 1 0-2h9a1 1 0 0 1 1 1'/%3E%3C/svg%3E");
} */

.icon-clipboard {
  display: inline-block;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath fill='%23a15d38' d='m18.64 114.25l83.27-98.22c2.63 0 7.45.24 7.45 6.74v94.53c0 2.63-2.13 4.76-4.76 4.76H24.42c-2.63.01-5.78-2.35-5.78-7.81'/%3E%3Cpath fill='%23ba793e' d='M18.64 114.38V20.54c0-2.51 2.03-4.54 4.54-4.54h78.58c2.51 0 4.54 2.03 4.54 4.54v93.84c0 2.51-2.03 4.54-4.54 4.54H23.18c-2.51 0-4.54-2.03-4.54-4.54'/%3E%3Cpath fill='%23fff' d='M28.45 109.66V25.02c0-1.29 1.05-2.34 2.34-2.34h64.42c1.29 0 2.34 1.05 2.34 2.34v84.64c0 1.29-1.05 2.34-2.34 2.34H30.79c-1.29 0-2.34-1.04-2.34-2.34'/%3E%3Cpath fill='none' stroke='%23b0bec5' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M38.65 54.36h48.7m-48.7-11.45h48.7m-48.7 22.9h48.7m-48.7 11.46h48.7m-48.7 11.45h48.7m-48.7 11.45h20.83'/%3E%3Cpath fill='%23212121' d='M86.93 28.4V16.03H72.95l8.71 12.37z' opacity='0.35'/%3E%3Cpath fill='%232f7889' d='m78.01 16.49l-3.22-.05c-2.14 0-2.54-1.9-2.62-2.3c-.11-.52-.25-1.67-.31-2.13c-.54-4.49-2.08-7.25-7.69-7.89c-4.86-.55-8.35 4.44-8.35 9.2v.04c.01 2.15-1.62 3.95-3.77 3.95c0 0-6.28-1.07-10.77 4.07c-.84.96-1.85 4.92-1.86 6.03c-.02 3.09 2.65 3.5 3.58 3.51c4.18.03 38.23-.08 41.49-.08c1.34 0 2.43-1.09 2.43-2.43V26.6c.01-5.14-3.78-10.11-8.91-10.11m-14.12.27a3.35 3.35 0 1 1 0-6.7a3.35 3.35 0 0 1 0 6.7'/%3E%3Cpath fill='%2382aec0' d='M76.18 15.99h-1.94c-2.14 0-3-1.68-3.27-2.26c-.39-.85-.5-2.58-.57-3.04c-.56-3.53-3.51-6.33-7.06-6.71c-4.86-.53-8.98 3.27-8.98 8.02v.04c.01 2.15-1.62 3.95-3.77 3.95h-1.9a9.29 9.29 0 0 0-9.29 9.29v1.81c0 1.34 1.09 2.43 2.43 2.43h41.2c1.34 0 2.43-1.09 2.43-2.43v-1.81c.01-5.13-4.15-9.29-9.28-9.29m-13.75-.54a3.35 3.35 0 1 1 0-6.7a3.35 3.35 0 0 1 0 6.7'/%3E%3Cpath fill='%23b9e4ea' d='M78.97 22.04H44.89c-1.3 0-1.64-.73-.97-1.84c.98-1.61 3.32-2.67 5.32-2.67c4.34 0 20-.48 25.51-.48c2.69 0 4.09.9 5.26 2.4c.83 1.08.31 2.59-1.04 2.59'/%3E%3Cpath fill='none' stroke='%23b9e4ea' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2.116' d='M56.98 9.48c.56-2.28 2.71-2.93 2.71-2.93'/%3E%3C/svg%3E");
}

.pub_dir {
  display: flex;
  padding: 28px;
  position: relative;
}

.pub_dir::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%);
}

.dir_box {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 24px 28px;
  background: linear-gradient(135deg, #1d8bd8 0%, #127ec9 100%);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.dir_box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
}

.dir_box .icon-clipboard {
  flex-shrink: 0;
  /* filter: brightness(0) invert(1);
  opacity: 0.9; */
}

.dir_box .separator {
  width: 2px;
  height: 40px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0.3) 100%
  );
  margin: 0 20px 0 14px;
  border-radius: 1px;
}

.dir_box .dir_content {
  flex: 1;
  max-width: 220px;
}

.dir_box .dir_content a {
  font-size: 18px;
  line-height: 24px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.5px;
  display: block;
  transition: color 0.2s ease;
}

.dir_box .dir_content a:hover {
  color: #f1f5f9;
}

.sub_dir {
  display: flex;
  padding: 20px;
  position: relative;
}

.sub_dir:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, #e2e8f0 20%, #e2e8f0 80%, transparent 100%);
}

.sub_box {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .sub_box {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .sub_box .sub_item {
    padding: 14px 16px;
    font-size: 15px;
  }

  .dir_box {
    padding: 16px;
  }
}

@media (min-width: 1200px) {
  .sub_box {
    grid-template-columns: repeat(4, 1fr);
  }
}

.sub_box .sub_item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 20px;
  margin: 4px 0;
  font-size: 16px;
  line-height: 24px;
  color: #2c3e50;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 1px solid #dee2e6;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.sub_box .sub_item:hover {
  color: #0650ac;
  background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
  /* border-color: #ebf5fd; */
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.12);
  transform: translateY(-1px);
}

.sub_box .sub_item:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}