:root {
	--primary-color: #0066ff;
	--secondary-color: #00d4ff;
	--dark-bg: #0a0a0a;
	--card-bg: #1a1a1a;
	--text-primary: #ffffff;
	--text-secondary: #aaaaaa;
	--accent-red: #ff375f;
	--accent-green: #30d158;
	--border-radius: 20px;
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  background-color: var(--dark-bg);
  color: var(--text-primary);

  height: calc(var(--app-vh, 1vh) * 100);
  width: 100vw;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}

html, body {
  touch-action: none;          /* 禁止所有原生手势 */
  overscroll-behavior: none;   /* 防止系统回弹 */
}



/* 顶部导航栏 */
.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 15px 4px;
	background-color: rgba(10, 10, 10, 0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	z-index: 100;
	position: relative;
	padding-right: 15px;
	padding-left: 15px;
}

.logo {
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 700;
	font-size: 1.4rem;
}

.logo-icon {
	color: var(--primary-color);
}

.header-controls {
	display: flex;
	gap: 20px;
}

.icon-btn {
	background: none;
	border: none;
	color: var(--text-primary);
	font-size: 1.3rem;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: var(--transition);
	cursor: pointer;
}

/* 相机预览容器 */
.camera-container {
	aspect-ratio: 3 / 4;
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	background-color: #000;
	touch-action: none; 
	max-width: calc(100vw - 20px); /* 10px间距 */
	margin: auto; /* 保持自动居中 */
	/* 左右margin为auto，确保居中对称 */
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	transition: all 0.3s ease;
}


#video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scaleX(1); /* 用于前后置摄像头镜像处理 */
}

.camera-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 2;
}

.grid-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	background-image:
		linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
	background-size: 33.333% 33.333%; /* 默认 3x3 网格，可动态改 */
	opacity: 0.6;
	pointer-events: none;
	transition: all 0.3s ease;
	border-radius: 12px;
}


/* 滤镜效果层 */
.filter-layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 1;
	opacity: 0.7;
	transition: var(--transition);
}

/* 拍摄控制区 */
.controls-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: rgba(10, 10, 10, 0.9);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.5);
	padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
	padding: 15px;
	padding-right: 15px;
	padding-left: 15px;
	gap: 20px;
}

/* 滤镜选择器 */
.filter-selector {
  display: flex;
  gap: 12px; 
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  padding-left: 5px; 
  padding-right: 5px; 
  justify-content: flex-start;
  min-height: 70px; 
  padding-top: 8px; 
  padding-bottom: 10px;

  /*磨砂玻璃背景+轻阴影，提升容器质感，不影响间距 */
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}


.filter-selector {
  scroll-behavior: smooth; /* 平滑滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 优化 */
  position: relative;
  mask: linear-gradient(to left, transparent -10%, var(--dark-bg) 12%);
  -webkit-mask: linear-gradient(to left, transparent -10%, var(--dark-bg) 12%);
  
  /* 核心修改：限制仅横向滚动，禁用纵向滚动 */
  overflow-x: auto;    /* 允许横向滚动 */
  overflow-y: hidden;  /* 强制隐藏纵向滚动，禁止上下滑 */
  white-space: nowrap; /* 防止子元素换行，避免纵向高度溢出 */
  height: auto;        /* 固定/自适应高度（根据你的需求调整，比如设为具体值 40px） */
  max-height: 100%;    /* 限制最大高度，避免内容撑高导致纵向滚动 */
  touch-action: pan-x; /* 明确告诉浏览器仅允许横向触摸滑动，禁用纵向 */
}

.filter-selector::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 可选：确保子元素不会撑高容器（如果有需要） */
.filter-selector > * {
  display: inline-block; /* 子元素横向排列 */
  vertical-align: middle; /* 垂直居中，避免高度不一致 */
}

.filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px; 
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 优化动效曲线，更丝滑 */
  width: 70px; /* 保留原尺寸 */
  /* updateIOSMaskByFramehover反馈，不占间距 */
  border-radius: 12px;
}

/* updateIOSMaskByFramehover轻量反馈，无尺寸偏移，提升交互质感 */
.filter-item:hover {
  background: rgba(255, 255, 255, 0.04);
  transition: all 0.2s ease;
}

.filter-preview {
  width: 60px; /* 保留原尺寸 */
  height: 50px; /* 保留原尺寸 */
  border-radius: 12px; /* 保留原圆角 */
  overflow: hidden;
  position: relative;
  border: 3px solid transparent; /* 保留原边框宽度 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 优化动效曲线 */
  /* 核心质感：渐变边框+内外轻阴影，替代纯透明边框，高级不浮夸 */
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: 
	linear-gradient(var(--dark-bg), var(--dark-bg)),
	linear-gradient(to right, transparent, transparent);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* 激活态样式强化，保留原scale(1.1)和边框色 */
.filter-item.active .filter-preview {
  border-color: var(--primary-color);
  transform: scale(1.1); /* 保留原缩放 */
  /* 激活态强化渐变边框+阴影，突出选中态 */
  background-image: 
	linear-gradient(var(--dark-bg), var(--dark-bg)),
	linear-gradient(135deg, var(--primary-color), rgba(var(--primary-color-rgb), 0.7));
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.filter-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* updateIOSMaskByFrame图片轻锐化，提升预览质感，无尺寸变化 */
  image-rendering: -webkit-optimize-contrast;
  -webkit-font-smoothing: antialiased;
}

/* filter-name 保留所有原间距/尺寸，仅优化视觉 */
.filter-name {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-size: clamp(0.7rem, 2.5vw, 0.75rem); /* 保留原字体 */
  color: var(--text-secondary);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 优化动效 */
  padding: 1px 0; /* 保留原内边距 */
  /* 质感升级：渐变磨砂背景，替代纯rgba，更柔和 */
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.15));
  text-wrap: nowrap;
  text-overflow: ellipsis;
  /* 文字抗锯齿，提升清晰度 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.filter-item.active .filter-name {
  color: var(--primary-color);
  font-weight: 600; /* 保留原样式 */
  /* 轻量上移，强化激活反馈，无间距影响 */
  transform: translateY(-0.5px);
  background: none;
}

/* filter-dots 保留所有原间距/尺寸，仅优化视觉 */
.filter-dots {
  position: absolute;
  bottom: 19px; 
  width: 100%;
  text-align: center;
  font-size: 6px; /* 保留原尺寸 */
  letter-spacing: 2px; 
  color: #2D5BA3;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* 优化动效 */
  /* updateIOSMaskByFrame轻阴影，提升圆点精致度，无尺寸变化 */
  text-shadow: 0 0 2px rgba(45, 91, 163, 0.4);
}

.filter-item.active .filter-preview .filter-dots {
  color: var(--primary-color);
  /* updateIOSMaskByFrame激活态阴影强化，突出反馈 */
  text-shadow: 0 0 3px rgba(var(--primary-color-rgb), 0.6);
}



/* 拍摄按钮 */
.capture-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0 12px;
}


.capture-btn {
	width: 70px;
	height: 70px;
	border-radius: 50%;
	background-color: var(--text-primary);
	border: 5px solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition);
	position: relative;
	flex: 0 0 auto;
}

.capture-btn:active {
	transform: scale(0.85);
}

.capture-btn::after {
	content: '';
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: var(--text-primary);
	border: 2px solid rgba(0, 0, 0, 0.1);
}

.capture-btn.recording {
	animation: pulse 1.5s infinite;
}

@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
	70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
	100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.side-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition);
	font-size: 1.3rem;
}

/* 按钮激活态（栏显示时） */
.side-btn.active,
.icon-btn.active {
  color: var(--primary-color);
}

/* 未激活态（栏隐藏时） */
.side-btn,
.icon-btn {
  color: #fff;
}


/* 底部控制区 */
.bottom-controls {
	display: flex;
	justify-content: space-between;
	width: 100%;
	padding-top: 10px;
}

.control-group {
	display: flex;
	gap: 15px;
}

/* 预览模态框 */
.preview-modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.95);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 30px 20px;
	/* 增强安全区域处理 */
	padding-bottom: max(30px, env(safe-area-inset-bottom, 30px));
	padding-top: max(30px, env(safe-area-inset-top, 30px));
	transform: translateY(100%);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	box-sizing: border-box;
}

.preview-modal.active {
	transform: translateY(0);
}

.preview-image {
	max-width: 100%;
	max-height: calc(100vh - 200px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
	object-fit: contain;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	margin-top: 0; /* 移除固定margin，使用flex布局控制间距 */
}


.preview-controls {
	display: flex;
	gap: 20px;
	width: 100%;
	justify-content: center;
}

.preview-btn {
	padding: 15px 30px;
	border-radius: 50px;
	border: none;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	display: flex;
	align-items: center;
	gap: 10px;
}

.preview-btn.primary {
	background-color: var(--primary-color);
	color: white;
}

.preview-btn.secondary {
	background-color: rgba(255, 255, 255, 0.1);
	color: white;
}


/* 提示信息 */
.toast {
	position: fixed;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 12px 20px;
	border-radius: 10px;
	font-size: 0.9rem;
	z-index: 1001;
	opacity: 0;
	transition: opacity 0.3s, transform 0.3s;
	pointer-events: none;
	max-width: 90%;
	line-height: 1.5; 
	bottom: calc(100px + env(safe-area-inset-bottom));
}

.toast.space-full {
	bottom: auto;
	top: calc(80px + env(safe-area-inset-top));
}

.toast.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.toast .hint {
	font-size: 13px;
	color: rgba(255,255,255,0.85);
}

.toast .highlight {
	font-weight: 600;
	color: #fff;
}

.toast .album {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
}

.toast .album img {
	width: 14px;
	height: 14px;
	opacity: 0.9;
}


/* 加载动画 */
.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: 4px solid rgba(255, 255, 255, 0.1);
	border-top-color: var(--primary-color);
	animation: spin 1s linear infinite;
	z-index: 10;
}

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 相机状态指示器 */
.camera-status {
	position: absolute;
	top: 0px;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 8px 15px;
	border-radius: 20px;
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 5;
}

.status-indicator {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: var(--accent-red);
}

.status-indicator.active {
	background-color: var(--accent-green);
	animation: pulse 2s infinite;
}

/* 画幅取景框 */
.ratio-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 90%;
	aspect-ratio: 3 / 4; /* 默认比例 */
	transform: translate(-50%, -50%);
	border: 2px solid rgba(255,255,255,.9);
	border-radius: 12px;
	box-shadow: 
		0 0 0 9999px rgba(0,0,0,.35);
	pointer-events: none;
	transition: all .3s ease;
}

/*画幅比例数字样式*/
.ratio-text {
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont;
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	transform: scaleY(1.16);
	opacity: 0.9;
}

.ratio-texta {
	font-size: 1rem;
}

#previewCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#video {
  opacity: 0;
}

.gallery-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 10000;
}

.gallery-overlay.hidden {
  display: none;
}

#galleryFrame {
  width: 100%;
  height: 100%;
  border: none;
}

/* 按钮点击特效 */
@keyframes buttonClick {
  0% { transform: scale(1); }
  50% { transform: scale(0.85); }
  100% { transform: scale(1); }
}

.flip-camera-icon.clicked,
#filterToggleBtn i.clicked, 
#zoomControlBtn i.clicked, 
.filter-item.clicked, 
.zoom-option.clicked {
  animation: buttonClick 0.3s ease;
}

.flip-camera-icon {
  transition: transform 0.3s ease;
}

#albumBtn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.1);
	font-size: 1.3rem;
	color: var(--text-primary); 
	transition: var(--transition);
  }

  #albumBtn:hover {
	background: rgba(255, 255, 255, 0.2);
	color: var(--text-primary);
  }

  #albumThumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: none; /* 默认隐藏图片 */
  }

  #albumIcon {
	display: block; /* 默认显示图标 */
  }

/* 添加二级菜单过渡动画 - 修复布局问题 */
.primary-menu {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: opacity 0.3s ease;
}

.ratio-menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.ratio-menu.active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

/* 二级菜单按钮动画 */
.ratio-menu .icon-btn {
	opacity: 0;
	transform: translateY(-10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.ratio-menu.active .icon-btn {
	opacity: 1;
	transform: translateY(0);
}

/* 为每个按钮设置延迟，实现依次出现的效果 */
.ratio-menu .icon-btn:nth-child(1) { transition-delay: 0.25s; }
.ratio-menu .icon-btn:nth-child(2) { transition-delay: 0.10s; }
.ratio-menu .icon-btn:nth-child(3) { transition-delay: 0.10s; }
.ratio-menu .icon-btn:nth-child(4) { transition-delay: 0.25s; }



/* 底部焦距控制面板 */
/* ===============================
   底部焦距控制面板（弱存在感 · 高级）
   =============================== */

.zoom-controls-bottom {
	position: absolute;
	left: 50%;
	bottom: 0px;
	transform: translateX(-50%);

	min-width: 180px;
	padding: 4px 12px;
	border-radius: 22px;
	z-index: 10;

	/* 核心：弱存在感，不影响预览 */
	background: rgba(18, 18, 18, 0.25);

	/* 只给“托起感”，不抢画面 */
	box-shadow:
		0 2px 6px rgba(0, 0, 0, 0.28),
		inset 0 0 0 1px rgba(255, 255, 255, 0.05);

	transition: opacity 0.2s ease;
}

/* 隐藏状态 */
.zoom-controls-bottom.hidden {
	opacity: 0;
	pointer-events: none;
}

/* 出现动画 */
.zoom-controls-bottom.show {
	animation: slideUp 0.22s cubic-bezier(.2,.8,.2,1);
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* ===============================
   焦距选项容器
   =============================== */

.zoom-options {
	display: flex;
	gap: 12px;
	align-items: center;
}

/* ===============================
   单个焦距按钮
   =============================== */

.zoom-option {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.06);

	color: rgba(255, 255, 255, 0.82);

	padding: 4px 10px;
	border-radius: 14px;
	min-width: 45px;

	font-size: 0.8rem;
	text-align: center;
	cursor: pointer;

	transition:
		background 0.18s ease,
		transform 0.14s ease,
		color 0.18s ease,
		border-color 0.18s ease;
}

/* hover：极轻 */
.zoom-option:hover {
	background: rgba(255, 255, 255, 0.1);
	transform: scale(1.03);
}

/* ===============================
   激活焦距（高级感关键）
   =============================== */

.zoom-option.active {
	color: var(--primary-color);
	font-weight: 600;

	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.18);

	/* 控制在“专业相机”级别 */
	transform: scale(1.08);

	/* 微弱强调，不抢画面 */
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.3);
}


/* 调整控制容器高度，为焦距面板留出空间 */
.controls-container {
	padding-bottom: calc(30px + env(safe-area-inset-bottom, 0px));
}

/*滤镜栏*/
.filter-selector.hidden {
  opacity: 0;
  pointer-events: none;
  height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
}


/* ===== 预览页操作按钮 ===== */

.preview-actions {
	display: flex;
	justify-content: center;
	gap: 80px;
	width: 100%;
	padding: 20px 0;
	/* 关键修改：确保底部有足够的安全间距 */
	padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
	margin-top: auto; /* 使用自动外边距推到底部 */
}

.preview-action-btn {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	border: none;
	cursor: pointer;

	display: flex;
	align-items: center;
	justify-content: center;

	font-size: 1.7rem;

	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);

	box-shadow:
		inset 0 0 0 1px rgba(255,255,255,0.12),
		0 10px 28px rgba(0,0,0,0.55);

	transition:
		transform 0.18s ease,
		box-shadow 0.18s ease;
}

/* 点击反馈（手机核心） */
.preview-action-btn:active {
	transform: scale(0.86);
}

/* ✖ 舍弃 */
.preview-action-btn.discard {
	color: rgba(255,255,255,0.9);

	box-shadow:
		inset 0 0 0 1px rgba(255, 55, 95, 0.45),
		0 10px 28px rgba(255,55,95,0.35);
}

/* ✔ 保存 */
.preview-action-btn.confirm {
	color: var(--accent-green);

	box-shadow:
		inset 0 0 0 1px rgba(48,209,88,0.55),
		0 10px 28px rgba(48,209,88,0.35);
}
.logo {
	display: flex;
	align-items: center; /* 保持垂直居中，适配图片对齐 */
	/* 可选：给logo容器加个最小尺寸，避免图片变形 */
	min-width: 60px; 
}
/* logo图片样式：控制大小，保证不变形 */
.logo-img {
	width: 53px; /* 自定义logo宽度，根据需求调整 */
	height: auto; /* 高度自动，保持图片比例 */
	object-fit: contain; /* 保证图片完整显示，不拉伸 */
	/* 可选：去掉图片默认边框（如果有） */
	border: none;
	outline: none;
	margin-left: 7px; 
	/* 3. 往下移：正值越大，往下越多（2px是轻微下移） */
	margin-top: 0px; 
}

/* ===============================
紧凑 UI 模式（左右留白过大时启用）
=============================== */

body.compact-ui .header {
	padding-top: 12px;    
	padding-right: 15px;  
	padding-bottom: 0px;  
	padding-left: 15px;   
}

body.compact-ui .camera-status {
  top: 10px;
}

body.compact-ui .controls-container {
  padding-top: 12px;
  gap: 14px; /* 原来是 25px */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* 滤镜栏和拍照按钮更贴近 */
body.compact-ui .filter-selector {
  padding-top: 10px;    /* 顶部间距大幅减小，可根据需要调整为0-5px */
  padding-bottom: 13px; /* 底部保留少量间距，避免太贴底 */
  padding-left: 15px;  /* 左右间距保持不变，保证对齐 */
  padding-right: 15px;
  
  /* 可选：调整内部元素垂直对齐，让组件更靠上 */
  align-items: flex-start; 
  background: rgba(0, 0, 0, 0.5);
}

body.compact-ui .capture-controls {
  margin-top: -6px;
}

/* 拍照按钮略微缩小一点点 */
body.compact-ui .capture-btn {
  width: 72px;
  height: 72px;
}

body.compact-ui .capture-btn::after {
  width: 52px;
  height: 52px;
}

body.compact-ui .filter-preview {
  height: 40px;
}


/* 毛玻璃遮罩样式 */
.glassmorphism-mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0.03);
	backdrop-filter: blur(20px) saturate(180%);
	-webkit-backdrop-filter: blur(20px) saturate(180%);
	border-radius: 12px;
	pointer-events: none;
	z-index: 1; /* 在取景框下方 */
	opacity: 0;
	transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/* 添加微妙的内发光效果 */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.glassmorphism-mask.active {
	opacity: 1;
}

/* 为遮罩添加更细腻的渐变过度 */
.glassmorphism-mask::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: radial-gradient(
		ellipse at center,
		rgba(255, 255, 255, 0.05) 0%,
		rgba(255, 255, 255, 0.02) 70%,
		transparent 100%
	);
	border-radius: 12px;
	pointer-events: none;
}

/* 确保取景框在遮罩上方 */
.ratio-frame {
	z-index: 2;
}

/* Android遮罩覆盖层样式 */
.android-mask-overlay {
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* 确保取景框在遮罩上方 */
.ratio-frame {
	z-index: 3;
}

/* 网格覆盖层也要在遮罩上方 */
.grid-overlay {
	z-index: 4;
}