/* PC 方案 A：宽屏手机壳居中，内部仍按移动端布局 */
/* 令牌与 App.vue 保持一致（独立部署时作兜底） */
:root {
	--mg-bg: #F9FAFE;
	--mg-bg-shell: #F0F0F5;
	--mg-primary-12: rgba(10, 8, 175, 0.12);
	--mg-primary-18: rgba(10, 8, 175, 0.18);
}

@media screen and (min-width: 560px) {
	:root {
		--mg-shell-width: 400px;
	}

	html,
	body {
		background-color: var(--mg-bg-shell) !important;
		background-image:
			radial-gradient(ellipse 80% 50% at 50% -10%, var(--mg-primary-12), transparent 55%),
			linear-gradient(180deg, var(--mg-bg-shell) 0%, var(--mg-bg-shell) 100%);
		background-attachment: fixed;
	}

	#app {
		min-height: 100%;
	}

	uni-app {
		position: relative;
		width: 100%;
		max-width: var(--mg-shell-width);
		margin: 0 auto;
		min-height: 100%;
		background-color: var(--mg-bg);
		box-shadow:
			0 0 0 1px var(--mg-primary-18),
			0 24px 80px var(--mg-primary-12);
	}

	/* TabBar / 固定底栏 / 浮层顶栏：限制在手机壳宽度内 */
	uni-tabbar,
	.uni-tabbar,
	.uni-tabbar-bottom,
	.page-header--overlay,
	.bottom-bar {
		left: calc(50% - (var(--mg-shell-width) / 2)) !important;
		right: auto !important;
		width: var(--mg-shell-width) !important;
		max-width: 100vw;
		box-sizing: border-box;
	}

	/* 弹层遮罩可全屏；底部/中间内容落在壳内 */
	.uni-popup .uni-popup__wrapper,
	.uni-popup .uni-popup__wrapper.bottom,
	.uni-popup .uni-popup__wrapper.center {
		max-width: var(--mg-shell-width);
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}