/* 导航菜单：二级菜单父项箭头 + 移动端子项内联展示
   （桌面端下拉由主题自带 pandatab 组件克隆 .sub-menu 实现，这里只补箭头与手机端表现） */

/* 一级菜单：图标与文字间距（主题默认图标紧贴文字） */
.topNav[pandaTab]>.menu>li>a>.icon {
	margin-right: 7px;
	vertical-align: -.03em
}

/* 下拉 / 克隆出来的二级菜单项 */
.pandaTabWrap .sub-menu>li>a>.icon {
	margin-right: 8px;
	vertical-align: -.03em
}

/* 父项箭头 */
.topNav[pandaTab]>.menu>li.menu-item-has-children>a {
	position: relative
}

.topNav[pandaTab]>.menu>li.menu-item-has-children>a:after {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: 5px;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-top: 4px solid currentColor;
	opacity: .45;
	vertical-align: middle;
	-webkit-transform: translateY(-1px);
	transform: translateY(-1px)
}

/* 手机 / 平板：二级菜单恢复主题原生「点击父项弹出下拉」
   （子菜单由主题 JS 克隆到 body>.pandaTabWrap，样式与桌面下拉一致；
   这里只保留图标间距等微调。勿在此隐藏/改造 .sub-menu 结构） */
@media (max-width:991px) {
	.topNav[pandaTab]>.menu>li {
		vertical-align: top
	}

	.topNav[pandaTab]>.menu>li>a>.icon {
		margin-right: 5px
	}

	.topNav[pandaTab]>.menu>li.menu-item-has-children>.sub-menu>li>a>.icon {
		margin-right: 4px
	}
}

/* 后台说明块 */
.ni-nav-help {
	max-width: 760px;
	font-size: 13px;
	line-height: 1.75
}

.ni-nav-help ul {
	margin: 6px 0 10px;
	padding-left: 20px
}

.ni-nav-help code {
	padding: 1px 4px;
	border-radius: 3px;
	background: #f2f3f5;
	color: #c7254e;
	font-size: 12px
}

/* ============ 二级菜单（下拉面板）仿 9sb.net 风格 ============
   结构说明：主题 JS 在悬停父项时把 .sub-menu 克隆到 body>.pandaTabWrap，
   再用内联 left/top 定位；这里只负责外观、间距与开合动效。
   替换掉主题默认的「硬边框卡片 + 整行蓝底」写法。 */

/* 面板：8px 圆角 + 1px 描边 + 8px 内衬，项本身做成圆角胶囊；
   动效由原来的纵向缩放改为「淡入 + 上浮 6px」 */
.pandaTabWrap>.sub-menu {
	box-sizing: border-box;
	min-width: 132px;
	margin-top: 8px;
	padding: 8px 9px;
	border: 1px solid rgba(64, 79, 93, .08);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 14px 30px rgba(62, 57, 52, .1);
	-webkit-transform: translateY(6px);
	transform: translateY(6px);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: opacity .18s ease, -webkit-transform .18s ease, visibility .18s;
	transition: opacity .18s ease, transform .18s ease, visibility .18s
}

.pandaTabWrap>.sub-menu.show {
	-webkit-transform: translateY(0);
	transform: translateY(0);
	opacity: 1;
	visibility: visible
}

/* 悬停热区：补上面板与父项之间的 8px 空隙，
   鼠标从一级菜单下移时不会因为踩空而把面板关掉 */
.pandaTabWrap>.sub-menu:before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -12px;
	height: 12px;
	border: 0;
	background: transparent
}

/* 原样式在面板顶部画了一个小三角，仿制对象没有，这里去掉 */
.pandaTabWrap>.sub-menu:after {
	content: none
}

/* 二级项：圆角胶囊，13px/20px，左右 13px 内衬 */
.pandaTabWrap .sub-menu>li>a {
	margin: 2px 0;
	padding: 8px 13px;
	border-radius: 8px;
	color: #5f6b7a;
	font-size: 13px;
	line-height: 20px;
	text-align: left;
	-webkit-transition: background-color .18s ease, color .18s ease;
	transition: background-color .18s ease, color .18s ease
}

.pandaTabWrap .sub-menu>li>a:hover {
	color: #20a0ff;
	background: #f2f5f9
}

/* 当前所在项：浅主色渐变底 + 内描边，与一级菜单的选中态呼应 */
.pandaTabWrap .sub-menu>li.current-menu-item>a,
.pandaTabWrap .sub-menu>li.current-menu-ancestor>a {
	color: #20a0ff;
	background: -webkit-linear-gradient(135deg, rgba(32, 160, 255, .12), rgba(32, 160, 255, .05));
	background: linear-gradient(135deg, rgba(32, 160, 255, .12), rgba(32, 160, 255, .05));
	-webkit-box-shadow: inset 0 0 0 1px rgba(32, 160, 255, .1);
	box-shadow: inset 0 0 0 1px rgba(32, 160, 255, .1)
}

.pandaTabWrap .sub-menu>li.current-menu-item>a:hover,
.pandaTabWrap .sub-menu>li.current-menu-ancestor>a:hover {
	color: #20a0ff;
	background: -webkit-linear-gradient(135deg, rgba(32, 160, 255, .16), rgba(32, 160, 255, .08));
	background: linear-gradient(135deg, rgba(32, 160, 255, .16), rgba(32, 160, 255, .08))
}

/* 深色模式：面板换成深色卡片色，保持同样的圆角与胶囊项 */
[data-dark="1"] .pandaTabWrap>.sub-menu {
	border-color: rgba(255, 255, 255, .08);
	background: #34425a;
	-webkit-box-shadow: 0 18px 34px rgba(0, 0, 0, .45);
	box-shadow: 0 18px 34px rgba(0, 0, 0, .45)
}

[data-dark="1"] .pandaTabWrap .sub-menu>li>a {
	color: #c3ccd9
}

[data-dark="1"] .pandaTabWrap .sub-menu>li>a:hover {
	color: #7cc4ff;
	background: rgba(255, 255, 255, .07)
}

[data-dark="1"] .pandaTabWrap .sub-menu>li.current-menu-item>a,
[data-dark="1"] .pandaTabWrap .sub-menu>li.current-menu-ancestor>a {
	color: #7cc4ff;
	background: -webkit-linear-gradient(135deg, rgba(32, 160, 255, .2), rgba(32, 160, 255, .08));
	background: linear-gradient(135deg, rgba(32, 160, 255, .2), rgba(32, 160, 255, .08));
	-webkit-box-shadow: inset 0 0 0 1px rgba(32, 160, 255, .18);
	box-shadow: inset 0 0 0 1px rgba(32, 160, 255, .18)
}

[data-dark="1"] .pandaTabWrap .sub-menu>li.current-menu-item>a:hover,
[data-dark="1"] .pandaTabWrap .sub-menu>li.current-menu-ancestor>a:hover {
	color: #7cc4ff;
	background: -webkit-linear-gradient(135deg, rgba(32, 160, 255, .26), rgba(32, 160, 255, .12));
	background: linear-gradient(135deg, rgba(32, 160, 255, .26), rgba(32, 160, 255, .12))
}

/* 手机 / 平板：点击展开时面板略收窄，避免顶到屏幕边缘 */
@media (max-width:991px) {
	.pandaTabWrap>.sub-menu {
		min-width: 148px;
		padding: 6px
	}

	.pandaTabWrap .sub-menu>li>a {
		padding: 8px 12px
	}
}