/* ==========================================================================
   浏览器相机 — /tools/camera
   三端适配：桌面（取景器 + 右侧设置双栏） / 平板 / 手机（上下堆叠、取景器优先）
   ========================================================================== */

/* ---------- 全屏布局：占满电脑端屏幕，保留左侧导航 ---------- */
body[data-page="tools"] .app,
body[data-page="tools"] .main-content { max-width: 100%; }
.cam-page { max-width: none; margin: 0; box-sizing: border-box; }

.cam-page {
    /* ---------- 设计令牌 ----------
       语义色集中定义：Tailwind 色阶在浅色与深色主题下均可读（对比度 ≥4.5:1），
       避免原先硬编码 #0a7d3f / #d33 在深色主题下发暗、看不清。 */
    --cam-accent: var(--accent, #136ce9);
    --cam-ok: #15803d;         /* 成功 / 已保存 */
    --cam-ok-soft: color-mix(in srgb, var(--cam-ok) 12%, transparent);
    --cam-warn: #b45309;       /* 警告 / 倒计时 / 上传中 */
    --cam-danger: #dc2626;     /* 危险 / 删除 / 失败 */
    --cam-radius: 16px;
    --cam-radius-sm: 10px;
    --cam-gap: 16px;
    /* 触控目标下限（iOS HIG 44px / Material 48px，取折中并保证可见性） */
    --cam-tap: 42px;
    padding: 22px 26px 60px;
    box-sizing: border-box;
}

/* ---------- 标题区 ---------- */
.cam-hero {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px; padding: 18px 22px; margin-bottom: var(--cam-gap);
}
.cam-hero-icon {
    width: 52px; height: 52px; flex-shrink: 0; border-radius: 14px;
    display: flex; align-items: center; justify-content: center; font-size: 27px;
    background: color-mix(in srgb, var(--cam-accent) 16%, var(--bg-primary));
}
.cam-hero-text { flex: 1 1 320px; min-width: 0; }
.cam-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; color: var(--text-primary); }
.cam-sub { margin: 0; font-size: 13.5px; color: var(--text-secondary); line-height: 1.6; }
.cam-sub b { color: var(--cam-accent); }
.cam-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; }
.cam-tag {
    font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
    color: var(--text-secondary); background: var(--bg-hover);
    border: 1px solid var(--border-color); white-space: nowrap;
}
.cam-tag-ok {
    color: var(--cam-ok); border-color: color-mix(in srgb, var(--cam-ok) 34%, transparent);
    background: var(--cam-ok-soft);
}

/* ---------- 工作区：取景器 + 设置 ---------- */
.cam-workspace {
    display: grid; grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--cam-gap); align-items: start; margin-bottom: var(--cam-gap);
}
/* ---------- 桌面端（≥1081px）：关键排版 ----------
   1) 取景面板限宽：避免超宽屏下取景框按 4:3 铺到 1400px 宽 / 1050px 高，
      把快门与控制栏挤出视口，拍照时必须滚动才能按快门。
      限宽 880px 后高度约 660px，1080p 屏幕可完整看到取景框 + 控制栏。
   2) 设置栏吸顶 + 独立滚动：设置项较多，跟随滚动会让右侧留出大片空白。 */
@media (min-width: 1081px) {
    .cam-workspace { grid-template-columns: minmax(0, 1fr) 340px; }
    .cam-stage-panel { max-width: 880px; width: 100%; margin-inline: auto; }
    .cam-settings-panel {
        position: sticky; top: 16px;
        max-height: calc(100dvh - 32px);
        overflow-y: auto; overscroll-behavior: contain;
        scrollbar-width: thin;
    }
    /* 吸顶栏滚动时留出分隔，避免内容与标题粘连 */
    .cam-settings-panel::-webkit-scrollbar { width: 8px; }
    .cam-settings-panel::-webkit-scrollbar-thumb {
        background: var(--border-color); border-radius: 999px;
    }
    .cam-settings-panel::-webkit-scrollbar-track { background: transparent; }
}
.cam-panel {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 16px; box-sizing: border-box;
}
.cam-panel-title { margin: 0; font-size: 15px; font-weight: 800; color: var(--text-primary); }
.cam-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.cam-panel-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.cam-badge {
    display: inline-block; min-width: 22px; text-align: center;
    font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--cam-accent) 14%, var(--bg-primary));
    color: var(--cam-accent);
}

/* ---------- 取景框 ---------- */
.cam-stage {
    position: relative; width: 100%;
    aspect-ratio: 4 / 3;               /* 桌面默认 4:3 */
    /* ★ 关键兜底：aspect-ratio 在旧浏览器（Safari <15 / Chrome <88）不受支持，
       而取景区内全是 position:absolute 的子元素（无正常文档流内容），
       一旦 aspect-ratio 失效，容器高度就会塌成 0，video 跟着高度 0 → 画面完全不可见。
       min-height 保证任何情况下取景框都有可显示的高度。 */
    min-height: 300px;
    background: #0b0e14; border-radius: 14px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.cam-video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    min-height: 100%;
    object-fit: cover; display: block; background: #0b0e14;
    /* 不再用 opacity 隐藏未开启时的 video：
       未开启时 placeholder（不透明、z-index:2）本就覆盖在其上，视觉一致；
       而一旦 is-live 因任何异常没被加上，video 也不会永久不可见。 */
}

/* 构图网格 */
.cam-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; }
.cam-grid.is-on { opacity: 1; }
.cam-grid i { position: absolute; background: rgba(255,255,255,.34); display: block; }
.cam-grid-l, .cam-grid-r { top: 0; bottom: 0; width: 1px; }
.cam-grid-l { left: 33.333%; } .cam-grid-r { left: 66.666%; }
.cam-grid-t, .cam-grid-b { left: 0; right: 0; height: 1px; }
.cam-grid-t { top: 33.333%; } .cam-grid-b { top: 66.666%; }
.cam-grid-v { display: none; } .cam-grid-h { display: none; }
/* 四分网格：两横两竖 */
.cam-stage[data-grid="quads"] .cam-grid i { display: block; }
.cam-stage[data-grid="quads"] .cam-grid-v { display: block; left: 50%; top: 0; bottom: 0; width: 1px; }
.cam-stage[data-grid="quads"] .cam-grid-h { display: block; top: 50%; left: 0; right: 0; height: 1px; }
.cam-stage[data-grid="quads"] .cam-grid-l,
.cam-stage[data-grid="quads"] .cam-grid-r { display: none; }

/* 滤镜标签 / 倒计时 / 闪白 / 占位 / 加载中 */
.cam-filter-tag {
    position: absolute; top: 12px; left: 12px; z-index: 3;
    font-size: 12px; font-weight: 700; color: #fff;
    background: rgba(0,0,0,.45); padding: 4px 10px; border-radius: 999px;
    backdrop-filter: blur(4px);
}
.cam-countdown {
    position: absolute; inset: 0; z-index: 5; display: flex;
    align-items: center; justify-content: center; pointer-events: none;
    background: rgba(0,0,0,.28);
}
.cam-countdown b {
    font-size: 84px; font-weight: 800; color: #fff; line-height: 1;
    text-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.cam-flash {
    position: absolute; inset: 0; z-index: 6; background: #fff;
    opacity: 0; pointer-events: none;
}
.cam-flash.is-fire { animation: camFlash .34s ease-out; }
@keyframes camFlash { 0% { opacity: .85; } 100% { opacity: 0; } }

.cam-placeholder {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 22px; gap: 6px;
    color: rgba(255,255,255,.82); background: linear-gradient(160deg, #131a26, #0b0e14);
}
.cam-ph-icon { font-size: 46px; opacity: .8; }
.cam-ph-title { margin: 4px 0 0; font-size: 15px; font-weight: 700; }
.cam-ph-sub { margin: 0; font-size: 12.5px; color: rgba(255,255,255,.6); max-width: 380px; line-height: 1.6; }
/* 摄像头已开启：隐藏占位层与滤镜标签，否则会盖住实时画面（占位层 z-index 高于 video） */
.cam-stage.is-live .cam-placeholder { display: none !important; }

.cam-loading {
    position: absolute; inset: 0; z-index: 7; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 12px;
    background: rgba(11,14,20,.82); color: #fff; font-size: 13px;
}
.cam-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.25); border-top-color: #fff;
    animation: camSpin .8s linear infinite;
}
@keyframes camSpin { to { transform: rotate(360deg); } }
/* [hidden] 兜底，防止被 display:flex 覆盖 */
.cam-loading[hidden], .cam-countdown[hidden],
.cam-filter-tag[hidden], .cam-placeholder[hidden] { display: none !important; }

/* ---------- 拍摄控制栏 ---------- */
.cam-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.cam-ctl-side { display: flex; align-items: flex-end; gap: 10px; flex: 1 1 0; min-width: 0; }
.cam-ctl-right { justify-content: flex-end; }
.cam-ctl-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cam-ctl-field > span { font-size: 11.5px; color: var(--text-secondary); padding-left: 2px; }
.cam-zoom-field { min-width: 118px; }
.cam-range { width: 100%; accent-color: var(--cam-accent); }

.cam-select, .cam-input {
    font-size: 13px; padding: 8px 10px; border-radius: 9px;
    border: 1px solid var(--border-color); background: var(--bg-primary);
    color: var(--text-primary); max-width: 100%; box-sizing: border-box;
}
.cam-ctl-side .cam-select { max-width: 190px; }
.cam-input { width: 100%; }
.cam-select:focus, .cam-input:focus { outline: none; border-color: var(--cam-accent); }

/* 快门 */
.cam-shutter {
    position: relative; width: 76px; height: 76px; flex-shrink: 0;
    border-radius: 50%; cursor: pointer; padding: 0;
    background: transparent; border: none;
    -webkit-tap-highlight-color: transparent;
}
.cam-shutter-ring {
    position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.85); background: rgba(255,255,255,.1);
    transition: transform .12s, border-color .2s, background .2s;
}
.cam-shutter-core {
    position: absolute; inset: 9px; border-radius: 50%;
    background: #fff; transition: transform .12s, background .2s;
}
.cam-shutter:hover:not(:disabled) .cam-shutter-core { background: #ffe9a8; }
.cam-shutter:active:not(:disabled) .cam-shutter-core { transform: scale(.86); }
.cam-shutter:disabled { cursor: not-allowed; opacity: .4; }
.cam-shutter.is-busy { pointer-events: none; }
.cam-shutter.is-counting .cam-shutter-core { background: var(--cam-warn); }
/* 键盘可达性：快门与图标按钮的焦点环 */
.cam-shutter:focus-visible { outline: none; }
.cam-shutter:focus-visible .cam-shutter-ring { border-color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cam-accent) 60%, transparent); }
.cam-icon-btn:focus-visible, .cam-btn:focus-visible, .cam-item:focus-visible {
    outline: 2px solid var(--cam-accent); outline-offset: 2px;
}

/* 图标按钮 */
.cam-icon-btn {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: 10px;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    color: var(--text-secondary); background: var(--bg-primary);
    border: 1px solid var(--border-color); padding: 0;
    transition: color .15s, background .15s, border-color .15s;
    -webkit-tap-highlight-color: transparent;
}
.cam-icon-btn:hover { color: var(--cam-accent); border-color: var(--cam-accent); }
.cam-icon-btn.is-on { color: #fff; background: var(--cam-accent); border-color: var(--cam-accent); }
.cam-icon-btn[hidden] { display: none !important; }

/* ---------- 通用按钮 ---------- */
.cam-btn {
    font-size: 13px; font-weight: 700; padding: 9px 16px; border-radius: 10px;
    cursor: pointer; border: 1px solid var(--border-color);
    background: var(--bg-primary); color: var(--text-primary);
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
    -webkit-tap-highlight-color: transparent; font-family: inherit;
}
.cam-btn:disabled { opacity: .45; cursor: not-allowed; }
.cam-btn-sm { font-size: 12.5px; padding: 7px 12px; }
.cam-btn-block { display: block; width: 100%; margin-top: 4px; }
.cam-btn-primary { color: #fff; background: var(--cam-accent); border-color: var(--cam-accent); }
.cam-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }
.cam-btn-ghost { background: transparent; }
.cam-btn-ghost:hover:not(:disabled) { color: var(--cam-accent); border-color: var(--cam-accent); }
.cam-btn-danger { color: var(--cam-danger); border-color: color-mix(in srgb, var(--cam-danger) 38%, transparent); background: transparent; }
.cam-btn-danger:hover:not(:disabled) { color: #fff; background: var(--cam-danger); border-color: var(--cam-danger); }
.cam-start-btn { display: block; width: 100%; margin-top: 14px; padding: 12px 16px; font-size: 14.5px; }

.cam-privacy-tip {
    display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0;
    font-size: 12px; color: var(--text-secondary); line-height: 1.6;
}
.cam-privacy-tip svg { flex-shrink: 0; margin-top: 2px; color: var(--cam-ok); }

/* ---------- 设置面板字段 ---------- */
/* 设置项较多，用「分组标题 + 分隔线」建立视觉节奏，
   否则 7 个连续字段在长栏里难以扫读。 */
.cam-settings-panel .cam-field { margin-bottom: 14px; }
.cam-field:last-of-type { margin-bottom: 10px; }
/* 分组标题（由 JS 依据字段位置插入，见 camera.js applyGroupTitles） */
.cam-sec-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; font-weight: 800; letter-spacing: .04em;
    color: var(--text-secondary); text-transform: uppercase;
    margin: 18px 0 10px; padding-top: 14px;
    border-top: 1px dashed var(--border-color);
}
.cam-settings-panel .cam-sec-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cam-field-label {
    display: block; font-size: 12.5px; font-weight: 700;
    color: var(--text-primary); margin-bottom: 7px;
}
.cam-field-hint { margin: 7px 0 0; font-size: 11.5px; color: var(--text-secondary); line-height: 1.6; }
.cam-seg { display: flex; gap: 6px; }
.cam-seg-wrap { flex-wrap: wrap; }
.cam-seg button {
    flex: 1 1 auto; font-size: 12.5px; font-weight: 600; padding: 8px 6px;
    border-radius: 9px; cursor: pointer; white-space: nowrap;
    border: 1px solid var(--border-color); background: var(--bg-primary);
    color: var(--text-secondary); font-family: inherit;
    transition: color .15s, background .15s, border-color .15s;
}
.cam-seg button:hover { color: var(--cam-accent); }
/* 选中态：加粗 + 轻微内阴影，浅色主题下也能一眼看出 */
.cam-seg button.active {
    color: #fff; background: var(--cam-accent); border-color: var(--cam-accent);
    font-weight: 700; box-shadow: 0 1px 4px color-mix(in srgb, var(--cam-accent) 35%, transparent);
}
.cam-seg button:focus-visible { outline: 2px solid var(--cam-accent); outline-offset: 1px; }
.cam-pan-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; margin-bottom: 8px; }
.cam-pan-row:last-of-type { margin-bottom: 0; }
.cam-pan-field[hidden] { display: none !important; }

/* ---------- 胶卷 / 相册网格 ---------- */
.cam-film-panel { margin-bottom: var(--cam-gap); }
.cam-film {
    display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.cam-item {
    position: relative; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border-color); background: var(--bg-primary);
    cursor: pointer; transition: border-color .15s, transform .15s;
    content-visibility: auto; contain-intrinsic-size: auto 150px;
}
.cam-item:hover { border-color: var(--cam-accent); transform: translateY(-2px); }
.cam-item.is-sel { border-color: var(--cam-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--cam-accent) 45%, transparent); }
.cam-item-img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #0b0e14;
}
.cam-item-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    padding: 7px 9px; font-size: 11px; color: var(--text-secondary);
    border-top: 1px solid color-mix(in srgb, var(--border-color) 55%, transparent);
}
.cam-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cam-item-check {
    position: absolute; top: 7px; left: 7px; z-index: 2;
    width: 21px; height: 21px; border-radius: 6px; display: flex;
    align-items: center; justify-content: center; font-size: 12px;
    background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.6); color: transparent;
}
.cam-item.is-sel .cam-item-check { background: var(--cam-accent); border-color: var(--cam-accent); color: #fff; }
.cam-item-del {
    position: absolute; top: 7px; right: 7px; z-index: 2;
    width: 23px; height: 23px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 15px; line-height: 1;
    background: rgba(0,0,0,.55); border: none; color: #fff; cursor: pointer; padding: 0;
    opacity: 0; transition: opacity .15s, background .15s;
}
/* 触屏设备没有 hover，删除按钮需常显，否则手机上无法删单张 */
.cam-item-del:focus { opacity: 1; }
.cam-item-del:hover { background: var(--cam-danger); }
/* 状态徽章：语义色 + 深色蒙版底，保证压在照片上任何位置都清晰可读 */
.cam-item-state {
    position: absolute; bottom: 38px; right: 7px; z-index: 2;
    font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
    background: color-mix(in srgb, var(--cam-ok) 88%, #000); color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
.cam-item-state.is-busy { background: color-mix(in srgb, var(--cam-warn) 90%, #000); }
.cam-item-state.is-err { background: color-mix(in srgb, var(--cam-danger) 90%, #000); }

.cam-empty { grid-column: 1 / -1; text-align: center; padding: 40px 16px; }
.cam-empty[hidden] { display: none !important; }
.cam-empty-icon { font-size: 40px; margin-bottom: 10px; }
.cam-empty p { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.7; }

/* ---------- 使用说明 ---------- */
.cam-guide {
    background: var(--bg-secondary); border: 1px solid var(--border-color);
    border-radius: 16px; padding: 20px 24px; box-sizing: border-box;
}
.cam-guide h3 { margin: 0 0 12px; font-size: 15.5px; font-weight: 800; color: var(--text-primary); }
.cam-guide ol { margin: 0 0 12px; padding-left: 20px; }
.cam-guide li { font-size: 13.5px; color: var(--text-secondary); line-height: 1.85; margin-bottom: 4px; }
.cam-guide li b { color: var(--text-primary); }
.cam-guide p { margin: 0 0 8px; font-size: 13px; color: var(--text-secondary); line-height: 1.8; }
.cam-guide p b { color: var(--text-primary); }

/* ---------- 轻提示 ---------- */
.cam-toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 2147483200;
    transform: translateX(-50%); max-width: min(88vw, 460px);
    padding: 11px 18px; border-radius: 12px;
    font-size: 13.5px; font-weight: 600; line-height: 1.6; text-align: center;
    color: #fff; background: rgba(24,28,36,.95);
    box-shadow: 0 10px 32px rgba(0,0,0,.3);
    animation: camToastIn .2s ease-out;
}
.cam-toast.is-ok { background: color-mix(in srgb, var(--cam-ok) 94%, #000); }
.cam-toast.is-err { background: color-mix(in srgb, var(--cam-danger) 94%, #000); }
@keyframes camToastIn { from { opacity: 0; transform: translate(-50%, 10px); } }

/* ---------- 大图查看 ---------- */
.cam-mask {
    position: fixed; inset: 0; z-index: 2147483000;
    background: rgba(8,10,14,.94);
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    padding: 24px; box-sizing: border-box; gap: 12px;
}
.cam-mask[hidden] { display: none !important; }
.cam-lb-img { max-width: 100%; max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 8px; }
.cam-lb-meta { color: rgba(255,255,255,.8); font-size: 13px; text-align: center; line-height: 1.7; }
.cam-lb-close {
    position: absolute; top: 18px; right: 20px; width: 40px; height: 40px;
    border-radius: 50%; font-size: 26px; line-height: 1; cursor: pointer;
    background: rgba(255,255,255,.12); border: none; color: #fff; padding: 0;
}
.cam-lb-close:hover { background: rgba(255,255,255,.24); }

/* ---------- 平板：≤1080px 设置栏移到取景器下方 ---------- */
@media (max-width: 1080px) {
    .cam-workspace { grid-template-columns: minmax(0, 1fr); }
    .cam-settings-panel { order: 2; }
    /* 平板横向空间充裕：取景框居中限宽，避免超宽扁的观感 */
    .cam-stage-panel { max-width: 720px; width: 100%; margin-inline: auto; }
    /* 平板仍有足够宽度承载双列设置，减少纵向滚动 */
    .cam-settings-panel {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px; align-content: start;
    }
    /* 跨列字段（存储位置、网盘目录、恢复默认）保持整行，避免被压窄 */
    .cam-settings-panel .cam-field[data-wide],
    .cam-settings-panel .cam-sec-title,
    .cam-settings-panel .cam-btn-block { grid-column: 1 / -1; }
}

/* ---------- 手机：≤767px ---------- */
@media (max-width: 767px) {
    .cam-page { --cam-gap: 12px; padding: 14px 12px 46px; }
    .cam-hero { padding: 14px 16px; gap: 12px; border-radius: 14px; }
    .cam-hero-icon { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
    .cam-title { font-size: 19px; }
    .cam-sub { font-size: 12.5px; }
    .cam-hero-tags { width: 100%; }
    .cam-panel { padding: 12px; border-radius: 14px; }

    /* 取景框在手机上按 3:4 竖屏，更符合手持拍摄 */
    .cam-stage { aspect-ratio: 3 / 4; min-height: 380px; }
    /* 关键：手机上「取景框 + 快门」应尽量同屏可见，
       因此取景框不占满剩余高度，为控制栏留出空间。 */
    .cam-stage { max-height: 56dvh; }

    .cam-controls { gap: 10px; }
    .cam-ctl-side { flex: 1 1 100%; justify-content: space-between; }
    .cam-shutter { width: 68px; height: 68px; order: -1; margin: 0 auto; }
    .cam-ctl-field > span { font-size: 11px; }
    .cam-ctl-side .cam-select { max-width: 132px; font-size: 16px; } /* 16px 防 iOS 聚焦缩放 */
    .cam-icon-btn { width: 42px; height: 42px; }                       /* 触控目标 ≥42px */
    .cam-zoom-field { min-width: 104px; }

    /* 设置项在手机上以双列网格排布，显著缩短页面长度、减少滚动 */
    .cam-settings-panel .cam-field { margin-bottom: 12px; }
    .cam-field-hint { font-size: 11px; }
    .cam-seg button { padding: 9px 4px; }               /* 加大触控高度 */

    /* 胶卷：横向滑动 + snap，点完快门不用纵向滚动就能看到新照片 */
    .cam-film {
        display: flex; gap: 9px; overflow-x: auto; scroll-snap-type: x mandatory;
        padding-bottom: 4px; -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .cam-item { flex: 0 0 104px; scroll-snap-align: start; }
    .cam-empty { flex: 1 1 100%; }

    /* 手机没有 hover，删除按钮常显 */
    .cam-item-del { opacity: 1; width: 26px; height: 26px; }

    .cam-guide { padding: 16px 18px; border-radius: 14px; }
    .cam-guide li, .cam-guide p { font-size: 12.5px; }
    .cam-lb-img { max-height: calc(100dvh - 140px); }
    .cam-countdown b { font-size: 66px; }
}

/* ---------- 超小屏：≤400px ---------- */
@media (max-width: 400px) {
    .cam-page { padding: 12px 10px 40px; }
    .cam-film { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
    .cam-seg button { font-size: 12px; padding: 8px 4px; }
    .cam-panel-acts .cam-btn { flex: 1 1 auto; }
    /* 超小屏：胶卷退回网格（横向滑动会挤到看不清缩略图） */
    .cam-film {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
        overflow-x: visible; scroll-snap-type: none;
    }
    .cam-item { flex: initial; }
    .cam-stage { max-height: 52dvh; }
    .cam-seg button { font-size: 12px; padding: 9px 3px; }
}

/* 尊重系统的减少动态效果设置 */
@media (prefers-reduced-motion: reduce) {
    .cam-flash.is-fire { animation: none; }
    .cam-spinner { animation-duration: 2.4s; }
    .cam-item, .cam-item-del { transition: none; }
}