/**
 * 全站通用移动版顶部导航条
 * 左后退、中标题、右前进
 * 桌面端隐藏；会员中心移动端（≤767px）显示
 */

/* 默认隐藏 */
.sanxio-mobile-top-nav {
	display: none;
}

/* 会员中心移动端（≤767px）：显示，置顶 */
/* 含 responsive（.member-md3-page）与 /mobile/member/（核心模板，body 无该 class） */
@media (max-width: 767px) {
	.sanxio-mobile-top-nav {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		position: fixed !important;
		top: 0 !important;
		left: 0;
		right: 0;
		z-index: 1001 !important;
		height: 48px;
		padding: 0 8px;
		background-color: var(--md-sys-color-surface, #fff);
		border-bottom: 1px solid var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.12));
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
		box-sizing: border-box;
	}
	.sanxio-mobile-top-nav__btn {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		color: var(--md-sys-color-on-surface-variant, #49454f);
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		-webkit-tap-highlight-color: transparent;
	}
	.sanxio-mobile-top-nav__btn svg {
		position: relative;
		top: 1px;
	}
	.sanxio-mobile-top-nav__btn:hover {
		background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
	}
	.sanxio-mobile-top-nav__title {
		flex: 1;
		min-width: 0;
		padding: 0 12px;
		font-size: 16px;
		font-weight: 500;
		color: var(--md-sys-color-on-surface, #1c1c1c);
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
	}
	.sanxio-mobile-top-nav__logo {
		width: 28px;
		height: 28px;
		border-radius: 6px;
		object-fit: cover;
		flex-shrink: 0;
	}
	.sanxio-mobile-top-nav__title-text {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.sanxio-mobile-top-nav__title--expandable {
		cursor: pointer;
		border: none;
		background: transparent;
		font: inherit;
		border-radius: 8px;
		-webkit-tap-highlight-color: transparent;
	}
	.sanxio-mobile-top-nav__title--expandable:hover {
		background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
	}
	.sanxio-mobile-top-nav__chevron {
		font-size: 20px;
		font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
		transition: transform 0.2s;
	}
	.sanxio-mobile-top-nav__title--expandable[aria-expanded="false"] .sanxio-mobile-top-nav__chevron {
		transform: rotate(180deg);
	}
	.sanxio-mobile-top-nav__avatar {
		flex-shrink: 0;
		width: 44px;
		height: 44px;
		padding: 0;
		margin: 0;
		border: none;
		background: transparent;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		-webkit-tap-highlight-color: transparent;
		position: relative;
	}
	.sanxio-mobile-top-nav__chat-badge {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 3;
		min-width: 18px;
		height: 18px;
		padding: 0 5px;
		box-sizing: border-box;
		font-size: 10px;
		font-weight: 600;
		line-height: 16px;
		border-radius: 9px;
		background: var(--md-sys-color-error, #b3261e);
		color: var(--md-sys-color-on-error, #fff);
		border: 2px solid var(--md-sys-color-surface, #fff);
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
		display: none;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}
	.sanxio-mobile-top-nav__chat-badge:not(:empty) {
		display: inline-flex;
	}
	.sanxio-mobile-top-nav__avatar:hover {
		background-color: var(--md-sys-color-surface-container-highest, rgba(0, 0, 0, 0.06));
	}
	.sanxio-mobile-top-nav__avatar img {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		object-fit: cover;
	}
	.sanxio-mobile-top-nav__avatar .material-symbols-outlined {
		font-size: 34px;
		color: var(--md-sys-color-on-surface-variant, #49454f);
		line-height: 1;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, calc(-50% + 1px));
	}
	/* /mobile/member/ 无 member-md3-page，为固定导航预留空间 */
	body:has(.sanxio-mobile-top-nav):not(.member-md3-page) {
		padding-top: 48px;
	}
	/* 首页/主站（有 mdc-top-app-bar）不显示 */
	body:has(.mdc-top-app-bar) .sanxio-mobile-top-nav {
		display: none !important;
	}
}

/* First paint: reserve no obsolete action slot. No-JS browsers retain original controls.
   A CSS-only watchdog restores the legacy control if every bootstrap script is blocked. */
@media(max-width:1024px) and (scripting:enabled){
 :root:not([data-sx-menu-state="legacy"]):not([data-sx-menu-state="excluded"]) #js-mobile-top-nav:has(#js-mobile-settings-toggle) #js-mobile-drawer-toggle{width:0;min-width:0;max-width:0;padding:0;margin:0;visibility:hidden;overflow:hidden;animation:sx-menu-bootstrap-fallback 0s 6s forwards}
 @keyframes sx-menu-bootstrap-fallback{to{width:44px;min-width:44px;max-width:44px;visibility:visible;overflow:visible}}
}
@media(max-width:1024px){
 /* Language belongs to the avatar menu. Auth-page message links must never paint,
    even before experience scripts add their body state classes. */
 #js-mobile-top-nav #js-translate-btn-mobile,
 #js-mobile-top-nav:has(.md3-mobile-top-nav__title-text[data-i18n^="login."]) a[href*="message.php"],
 #js-mobile-top-nav:has(.md3-mobile-top-nav__title-text[data-i18n^="register."]) a[href*="message.php"]{display:none!important}
 :root[data-sx-menu-state="legacy"] #js-mobile-top-nav #js-mobile-drawer-toggle{display:flex!important;width:44px!important;min-width:44px!important;max-width:44px;visibility:visible;pointer-events:auto;animation:none}
}

/* Stable mobile navigation glyphs: same vectors before and after font/script loading. */
@media(max-width:1024px){
#js-mobile-top-nav #js-mobile-back-btn .material-symbols-outlined,
#js-mobile-top-nav #js-mobile-settings-toggle .mdc-top-app-bar__user-avatar-fallback,
#js-mobile-top-nav a[href*="message.php"] .material-symbols-outlined,
#js-mobile-top-nav #sanxioMobileSearchBarToggleIcon{font-size:0!important;line-height:0!important;width:24px!important;height:24px!important;flex-shrink:0;overflow:hidden}
#js-mobile-top-nav #js-mobile-back-btn .material-symbols-outlined>svg,
#js-mobile-top-nav #js-mobile-settings-toggle .mdc-top-app-bar__user-avatar-fallback>svg,
#js-mobile-top-nav a[href*="message.php"] .material-symbols-outlined>svg,
#js-mobile-top-nav #sanxioMobileSearchBarToggleIcon>svg{display:none!important}
#js-mobile-top-nav #js-mobile-back-btn .material-symbols-outlined::before,
#js-mobile-top-nav #js-mobile-settings-toggle .mdc-top-app-bar__user-avatar-fallback::before,
#js-mobile-top-nav a[href*="message.php"] .material-symbols-outlined::before,
#js-mobile-top-nav #sanxioMobileSearchBarToggleIcon::before{content:"";display:block;width:24px;height:24px;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:24px 24px;mask-size:24px 24px;-webkit-mask-position:center;mask-position:center}
#js-mobile-top-nav #js-mobile-back-btn .material-symbols-outlined::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2012H4M11%205l-7%207%207%207%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2012H4M11%205l-7%207%207%207%22%2F%3E%3C%2Fsvg%3E")}
#js-mobile-top-nav #js-mobile-settings-toggle .mdc-top-app-bar__user-avatar-fallback::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200%20M15%209a3%203%200%201%201-6%200%203%203%200%200%201%206%200%20M6%2019a6%206%200%200%201%2012%200%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2012a9%209%200%201%201-18%200%209%209%200%200%201%2018%200%20M15%209a3%203%200%201%201-6%200%203%203%200%200%201%206%200%20M6%2019a6%206%200%200%201%2012%200%22%2F%3E%3C%2Fsvg%3E")}
#js-mobile-top-nav a[href*="message.php"] .material-symbols-outlined::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v14H3z%20M3%206l9%207%209-7%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205h18v14H3z%20M3%206l9%207%209-7%22%2F%3E%3C%2Fsvg%3E")}
#js-mobile-top-nav #sanxioMobileSearchBarToggleIcon::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2010a6%206%200%201%201-12%200%206%206%200%200%201%2012%200%20M14.5%2014.5L21%2021%22%2F%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2010a6%206%200%201%201-12%200%206%206%200%200%201%2012%200%20M14.5%2014.5L21%2021%22%2F%3E%3C%2Fsvg%3E")}
#js-mobile-top-nav #js-mobile-settings-toggle .mdc-top-app-bar__user-avatar-fallback{position:absolute!important;inset:0!important;margin:auto!important;transform:none!important}
}