:root{
  /* —— 层级默认背景 —— */
  --lvl1-bg: #053B69;
  --lvl1-hover: #79a8a9;

  --lvl2-bg: #1f5f8b;
  --lvl2-hover: #79a8a9;

  --lvl3-bg: #3d84a8;
  --lvl3-hover: #79a8a9;

  --lvl4-bg: #ffffff;

  /* —— 各层选中高亮 —— */
  --lvl1-selected-bg: #c37845;   /* 青绿 */
  --lvl1-selected-hover: #f7cfaa;
  --lvl1-selected-color: #ffffff;

  --lvl2-selected-bg: #c37845;   /* 红 */
  --lvl2-selected-hover: #f7cfaa;
  --lvl2-selected-color: #ffffff;

  --lvl3-selected-bg: #c37845;   /* 紫 */
  --lvl3-selected-hover: #f7cfaa;
  --lvl3-selected-color: #ffffff;

  --lvl4-selected-bg: #c37845;   /* 橙 */
  --lvl4-selected-hover: #f7cfaa;
  --lvl4-selected-color: #ffffff;

  /* 边框/文字 */
  --border: #e0e0e0;
  --border-sub: #f0f0f0;
  --text-dim: #475569;
}

/* —— 容器 —— */
.accordion-menu{ width:100%; }
.accordion-item{
  border:1px solid var(--border);
  border-radius:0;
  overflow:hidden;
}
.accordion-item:not(:last-child){ border-bottom:none; }

/* —— L1 —— */
.accordion-header{
  background:var(--lvl1-bg);
  padding:12px 15px;
  display:flex; justify-content:space-between; align-items:center;
  transition:background-color .25s ease;
}
.accordion-header:hover{ background:var(--lvl1-hover); }
.accordion-title{
  flex:1;
  font-weight:600; color:#ffffff; font-size:14px; text-decoration:none;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.accordion-title:hover{ color:#ffffff; text-decoration:none; }

/* 静态 SVG 箭头，使用 mask 技术 */
.accordion-icon,
.accordion-subicon,
.accordion-subsubicon{
  width:16px; height:16px;
  flex:0 0 16px;
  margin-left:8px;
  background-color: currentColor;
  color:#ffffff;

  font-size:0; line-height:0; overflow:hidden;

  --chevron-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M8.5 5.5 L16.5 12 8.5 18.5 Z"/></svg>');
  -webkit-mask-image: var(--chevron-svg);
  mask-image: var(--chevron-svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;

  transform: rotate(0deg);
  transition: transform .25s ease;
  cursor:pointer;
  user-select:none;
}

/* L1 内容折叠 */
.accordion-content{
  max-height:0; overflow:hidden;
  transition:max-height .3s ease;
}
.accordion-content.active{ max-height:9999px; }
.accordion-item.active .accordion-icon{ transform: rotate(90deg); }

/* —— L2 —— */
.accordion-subitem{ border-top:1px solid var(--border-sub); }
.accordion-subheader{
  background:var(--lvl2-bg);
  padding:10px 15px 10px 25px;
  display:flex; justify-content:space-between; align-items:center;
  transition:background-color .25s ease;
}
.accordion-subheader:hover{ background:var(--lvl2-hover); }
.accordion-subtitle{
  flex:1;
  font-size:13px; color:#ffffff; text-decoration:none; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.accordion-subtitle:hover{ color:#ffffff; text-decoration:none; }

.accordion-subcontent{
  max-height:0; overflow:hidden; transition:max-height .3s ease;
  background:#f1f5f9;
}
.accordion-subcontent.active{ max-height:9999px; }
.accordion-subitem.active .accordion-subicon{ transform: rotate(90deg); }

/* —— L3 —— */
.accordion-subsubitem{ border-top:1px solid #e9ecef; }
.accordion-subsubheader{
  background:var(--lvl3-bg);
  padding:8px 15px 8px 35px;
  display:flex; justify-content:space-between; align-items:center;
  transition:background-color .25s ease;
}
.accordion-subsubheader:hover{ background:var(--lvl3-hover); }
.accordion-subsubtitle{
  flex:1;
  font-size:12px; color:#ffffff; text-decoration:none; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.accordion-subsubtitle:hover{ color:#ffffff; text-decoration:none; }

.accordion-subsubcontent{
  max-height:0; overflow:hidden; transition:max-height .3s ease; background:#e8f0f8;
}
.accordion-subsubcontent.active{ max-height:9999px; }
.accordion-subsubitem.active .accordion-subsubicon{ transform: rotate(90deg); }

/* —— L4 —— */
.accordion-subsubcontent a{
  display:block; padding:8px 15px 8px 45px;
  color:var(--text-dim);
  text-decoration:none; font-size:12px;
  border-top:1px solid #e2e8f0; background:var(--lvl4-bg);
  transition:background-color .2s ease, color .2s ease;
}
.accordion-subsubcontent a:hover{ background:#eef2f7; color:#1f2937; }

/* —— 高亮状态（整行不同颜色） —— */
.accordion-header.is-selected-row{
  background-color:var(--lvl1-selected-bg) !important;
  color:var(--lvl1-selected-color) !important;
}
.accordion-header.is-selected-row:hover{ background-color:var(--lvl1-selected-hover) !important; }
.accordion-header.is-selected-row .accordion-title,
.accordion-header.is-selected-row .accordion-icon{
  color:var(--lvl1-selected-color) !important; font-weight:800;
}

.accordion-subheader.is-selected-row{
  background-color:var(--lvl2-selected-bg) !important;
  color:var(--lvl2-selected-color) !important;
}
.accordion-subheader.is-selected-row:hover{ background-color:var(--lvl2-selected-hover) !important; }
.accordion-subheader.is-selected-row .accordion-subtitle,
.accordion-subheader.is-selected-row .accordion-subicon{
  color:var(--lvl2-selected-color) !important; font-weight:800;
}

.accordion-subsubheader.is-selected-row{
  background-color:var(--lvl3-selected-bg) !important;
  color:var(--lvl3-selected-color) !important;
}
.accordion-subsubheader.is-selected-row:hover{ background-color:var(--lvl3-selected-hover) !important; }
.accordion-subsubheader.is-selected-row .accordion-subsubtitle,
.accordion-subsubheader.is-selected-row .accordion-subsubicon{
  color:var(--lvl3-selected-color) !important; font-weight:800;
}

.accordion-subsubcontent a.is-selected-row{
  background-color:var(--lvl4-selected-bg) !important;
  color:var(--lvl4-selected-color) !important;
  font-weight:800 !important;
  border-radius:4px;
}
.accordion-subsubcontent a.is-selected-row:hover{
  background-color:var(--lvl4-selected-hover) !important;
}