/* A shared visual language for the shooting brief (photographer H5, external Web page, admin panel). */
.shooting-brief {
  --sb-ink: #192e38;
  --sb-body: #3d5c57;
  --sb-muted: #61757e;
  --sb-line: #dce6e7;
  --sb-teal: #0f766e;
  --sb-teal-soft: #e1f5ee;
  --sb-amber: #b45309;
  --sb-amber-soft: #fef7e6;
  --sb-amber-line: #f6e0b0;
  color: var(--sb-ink);
  font-size: 14px;
  line-height: 1.55;
  min-width: 0;
}
.shooting-brief *, .shooting-lightbox * { box-sizing: border-box; }
.shooting-brief [hidden] { display: none !important; }
.shooting-brief button, .shooting-brief input, .shooting-brief select { font: inherit; box-shadow: none; }
.shooting-brief button { cursor: pointer; transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
/* 现场连点「上一张/下一张」很常见：touch-action: manipulation 告诉浏览器这里
   只有点击、没有双击缩放手势，快速连点不会触发 Safari 的页面级双击放大。 */
.shooting-brief button, .shooting-brief .sb-tile, .shooting-brief .sb-stack-item,
.shooting-lightbox button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.shooting-brief button:focus-visible, .shooting-brief input:focus-visible, .shooting-brief select:focus-visible, .shooting-lightbox button:focus-visible { outline: 3px solid #5ba79f; outline-offset: 3px; }

/* ---------- Header ---------- */
.sb-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 4px 0 18px; }
.sb-eyebrow { color: var(--sb-teal); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.sb-heading h2 { font-size: 23px; line-height: 1.3; margin: 4px 0 6px; }
.sb-heading p { color: var(--sb-muted); margin: 0; font-size: 13px; }
.sb-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 560px; }
.sb-tools button { min-height: 38px; padding: 8px 13px; border: 1px solid var(--sb-line); border-radius: 8px; color: var(--sb-ink); background: #fff; font-size: 13px; }
.sb-tools button:hover { background: #f0f6f5; }
.sb-tools button.primary { background: var(--sb-teal); color: #fff; border-color: var(--sb-teal); }
.sb-tools details { position: relative; }
.sb-tools summary { list-style: none; cursor: pointer; border: 1px solid var(--sb-line); border-radius: 8px; background: #fff; padding: 8px 13px; min-height: 38px; font-size: 13px; }
.sb-tools summary::-webkit-details-marker { display: none; }
.sb-template-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 5; padding: 6px; min-width: 150px; border: 1px solid var(--sb-line); border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(25,61,54,.10); }
.sb-template-menu button { display: block; width: 100%; border: 0; text-align: left; }
.sb-refresh-live { color: var(--sb-muted); font-size: 12px; white-space: nowrap; }
.sb-refresh-message { font-size: 12px; color: #a23525; }
.sb-refresh-message:not(:empty) { margin-left: 4px; }
/* 刷新状态信息归一组（管理端 / 内部 H5 复用；外部 H5 在 collaboration.css 里覆盖布局） */
.sb-tools-info { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; min-width: 0; }
.sb-tools-info .sb-refresh-message { flex-basis: 100%; }
/* 回到顶部：长列表（50+ 任务 ≈ 30 屏）翻到深处一键回顶。粗箭头 + 「顶部」文字，一眼可辨。 */
.sb-back-top { position: fixed; right: 16px; bottom: 24px; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 52px; height: 52px; border-radius: 15px; border: 0; background: var(--sb-teal); color: #fff; opacity: 1; box-shadow: 0 6px 18px rgba(15, 118, 110, .42); touch-action: manipulation; }
.sb-back-top svg { display: block; }
.sb-back-top .sb-back-top-text { font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 1px; }
.sb-back-top[hidden] { display: none; }
.sb-back-top:active { transform: scale(.94); }

/* ---------- Task ownership tabs: this is the primary navigation ---------- */
.sb-scope-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; padding: 5px; margin-bottom: 12px; background: #e3ecea; border: 1px solid #cbdcd7; border-radius: 14px; }
.shooting-brief .sb-scope-tab { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 12px 16px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #365951; font-size: 17px; font-weight: 650; }
.shooting-brief .sb-scope-tab[aria-selected="true"] { background: var(--sb-teal); border-color: var(--sb-teal); color: #fff; box-shadow: 0 3px 10px rgba(15,118,110,.22); }
.sb-scope-tab small { min-width: 26px; padding: 1px 7px; border-radius: 999px; background: rgba(15,118,110,.12); color: #0b655e; font-size: 13px; font-variant-numeric: tabular-nums; }
.shooting-brief .sb-scope-tab[aria-selected="true"] small { background: rgba(255,255,255,.22); color: #fff; }
.sb-scope-tabs:has(.sb-scope-tab:only-child) { grid-template-columns: 1fr; }

/* ---------- Progress summary ---------- */
.sb-summary { display: flex; align-items: center; gap: 20px; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--sb-line); border-radius: 12px; background: #fff; }
.sb-summary-nums { display: flex; flex-direction: column; flex-shrink: 0; }
.sb-summary-nums strong { font-size: 22px; font-weight: 650; line-height: 1.2; font-variant-numeric: tabular-nums; }
.sb-summary-nums strong small { font-size: 13px; font-weight: 400; color: var(--sb-muted); }
.sb-summary-nums span { color: var(--sb-muted); font-size: 12px; }
.sb-progress { flex: 1; min-width: 0; }
.sb-progress-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--sb-muted); }
.sb-progress b { color: var(--sb-teal); font-variant-numeric: tabular-nums; }
.sb-progress progress { display: block; width: 100%; height: 6px; margin-top: 6px; border: 0; border-radius: 3px; overflow: hidden; background: #e7efed; }
.sb-progress progress::-webkit-progress-bar { background: #e7efed; }
.sb-progress progress::-webkit-progress-value { background: var(--sb-teal); }

/* ---------- Event phase tabs ---------- */
.sb-phase-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0 0 12px; padding: 4px; border: 1px solid #cbdcd7; border-radius: 12px; background: #eef4f3; }
.shooting-brief .sb-phase-tab { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 46px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #365951; font-weight: 650; font-size: 14px; }
.shooting-brief .sb-phase-tab[aria-selected="true"] { border-color: var(--sb-teal); background: var(--sb-teal); color: #fff; }
.sb-phase-tab span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-phase-tab small { min-width: 18px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: .76; }
.sb-phase-tab[aria-selected="true"] small { opacity: .9; }
.sb-phase-section[hidden] { display: none !important; }

/* ---------- Collapsed filter drawer keeps the list on the first screen ---------- */
.sb-role-bar { position: relative; display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sb-role-bar-label { color: #365951; font-size: 13px; font-weight: 600; }
.shooting-brief .sb-role-current { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 16px; border: 1px solid var(--sb-line); border-radius: 10px; background: #fff; color: var(--sb-ink); font-size: 14px; touch-action: manipulation; }
.sb-role-current strong { font-weight: 600; }
.sb-role-switch { color: var(--sb-teal); font-size: 16px; line-height: 1; }
.sb-role-pop { position: absolute; top: calc(100% + 6px); left: 76px; z-index: 40; min-width: 230px; padding: 6px; border: 1px solid #d7e5e2; border-radius: 12px; background: #fff; }
.sb-role-pop .sb-role-menu { display: grid; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.sb-role-pop .shooting-brief .sb-role-menu button, .sb-role-pop .sb-role-menu button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 8px 12px; border-radius: 8px; text-align: left; font-size: 13px; touch-action: manipulation; }
.sb-search { position: relative; display: block; margin-bottom: 16px; }
/* ---------- 状态快筛常驻可见：现场最常用的就是「只看还没拍的」 ---------- */
.sb-filters { display: flex; flex-wrap: nowrap; gap: 4px; margin-bottom: 12px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.sb-filters::-webkit-scrollbar { display: none; }
.shooting-brief .sb-filters button { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; min-height: 40px; padding: 6px 8px; border: 1px solid var(--sb-line); border-radius: 8px; background: #fff; color: var(--sb-muted); font-size: 13px; font-weight: 500; white-space: nowrap; }
.shooting-brief .sb-filters button span { margin-left: 6px; font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }
.shooting-brief .sb-filters button[aria-pressed="true"] { background: var(--sb-teal); border-color: var(--sb-teal); color: #fff; font-weight: 600; }
.sb-role-menu { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid #d7e5e2; border-radius: 10px; background: #fff; }
.sb-role-menu-label { color: var(--sb-muted); font-size: 12px; font-weight: 700; margin-right: 2px; }
.shooting-brief .sb-role-menu button { min-height: 34px; padding: 6px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #365951; font-size: 12px; }
.sb-role-menu button span { margin-left: 5px; color: #71878d; font-variant-numeric: tabular-nums; }
.shooting-brief .sb-role-menu button[aria-pressed="true"] { background: #dcefe9; border-color: #bcded5; color: var(--sb-teal); font-weight: 700; }
.sb-search { position: relative; display: block; }
.sb-search input { width: 100%; min-height: 42px; padding: 10px 14px 10px 38px; border: 1px solid var(--sb-line); border-radius: 10px; background: #fff; color: var(--sb-ink); font-size: 14px; -webkit-appearance: none; appearance: none; }
/* Safari 会给 type=search 自带一个放大镜，和组件自绘图标叠成两个，全部关掉。 */
.sb-search input::-webkit-search-decoration,
.sb-search input::-webkit-search-results-decoration,
.sb-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.sb-search-icon { position: absolute; left: 13px; top: 50%; width: 13px; height: 13px; margin-top: -7px; border: 1.8px solid #93a9a5; border-radius: 50%; }
.sb-search-icon::after { content: ''; position: absolute; right: -5px; bottom: -4px; width: 6px; height: 1.8px; border-radius: 2px; background: #93a9a5; transform: rotate(45deg); }

/* ---------- List and cards ---------- */
.sb-results { font-size: 12px; color: var(--sb-muted); padding: 0 0 10px; }
.sb-phase-list { display: grid; gap: 20px; }
.sb-phase-section { min-width: 0; }
.sb-phase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--sb-line); }
.sb-phase-head h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.sb-phase-head span { color: var(--sb-muted); font-size: 12px; }
.sb-phase-head strong { color: var(--sb-teal); font-size: 13px; font-variant-numeric: tabular-nums; }
.sb-phase-empty { margin: 0; padding: 18px; border: 1px dashed #cbdcd7; border-radius: 10px; color: var(--sb-muted); background: #f8fbfa; text-align: center; font-size: 13px; }
.sb-empty { text-align: center; border: 1px dashed #bdcecc; border-radius: 12px; padding: 44px 20px; background: #f8fbfa; }
.sb-empty strong { font-size: 17px; }
.sb-empty p { color: var(--sb-muted); margin: 6px 0 0; }
.sb-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
.sb-card { min-width: 0; overflow: hidden; border: 1px solid var(--sb-line); border-radius: 14px; background: #fff; box-shadow: 0 1px 3px rgba(25,61,54,.06); transition: box-shadow 160ms ease, border-color 160ms ease, background-color 160ms ease; }
.sb-card:hover { box-shadow: 0 6px 20px rgba(25,61,54,.10); }
.sb-card.is-mine { border-color: #9fd4c6; box-shadow: 0 0 0 3px rgba(15,118,110,.07); }
.sb-card.is-complete { background: #f7fcfa; }

/* ---------- 参考图叠放：主图约占 90%，下层沿对角各露出一条边，照片再多也不多占布局 ----------
   三层的盒子完全一样大（各向内收 28px），只是整体沿对角错开 14px，
   于是右下角出现两级台阶。这是「一叠照片」的读法，不是拼贴。 */
.shooting-brief .sb-image { position: relative; display: block; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--sb-line); background: #e8f0ef; overflow: hidden; cursor: zoom-in; }
.shooting-brief .sb-stack { aspect-ratio: 16 / 10; }
.sb-stack-item { position: absolute; overflow: hidden; border-radius: 7px; background: #d8e5e3; box-shadow: 0 2px 10px rgba(15,50,46,.18); }
/* 叠放新规则：主图居中方正，后层照片比主图大一圈、从四周露出一点"尾巴"，
   并做毛玻璃虚化——第一眼只看到居中的主图，又能感觉到后面还有照片。 */
.sb-stack-1 { z-index: 4; inset: 14px; }
.sb-stack-2 { z-index: 3; inset: 6px; filter: blur(3px) saturate(.85); }
.sb-stack-3 { z-index: 2; inset: 0; filter: blur(5px) saturate(.75) brightness(.97); }
.sb-stack-2, .sb-stack-3 { box-shadow: 0 2px 8px rgba(15,50,46,.14); }
.shooting-brief .sb-stack-solo .sb-stack-1 { inset: 0; border-radius: 0; box-shadow: none; }
@keyframes sb-shimmer { from { background-position: 130% 0; } to { background-position: -130% 0; } }
/* 弱网加载时铺一层缓慢微光，避免大片死灰；图到位后会被 img 盖住。 */
.sb-stack-item::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(100deg, transparent 22%, rgba(255,255,255,.30) 50%, transparent 78%); background-size: 220% 100%; animation: sb-shimmer 1.2s linear infinite; }
.sb-stack-item img { display: block; position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.sb-photo-count { position: absolute; z-index: 5; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px 4px 8px; border-radius: 999px; background: rgba(12,42,38,.76); color: #fff; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sb-photo-count-glyph { position: relative; width: 13px; height: 13px; }
.sb-photo-count-glyph::before, .sb-photo-count-glyph::after { content: ''; position: absolute; width: 8px; height: 8px; border: 1.5px solid currentColor; border-radius: 2px; }
.sb-photo-count-glyph::before { top: 0; left: 0; }
.sb-photo-count-glyph::after { right: 0; bottom: 0; background: currentColor; }
.sb-image-label { position: absolute; z-index: 5; right: 22px; bottom: 22px; padding: 4px 9px; border-radius: 6px; background: rgba(255,255,255,.94); color: #2c5550; font-size: 11px; font-weight: 500; }
.shooting-brief .sb-stack-solo .sb-image-label { right: 8px; bottom: 8px; }
.sb-image-error { position: absolute; z-index: 6; inset: 0; display: grid; place-items: center; background: #eef4f3; font-size: 13px; color: var(--sb-muted); }
.shooting-brief .sb-image-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 130px; padding: 0; border-bottom: 1px solid var(--sb-line); background: #f6faf9; color: var(--sb-muted); cursor: default; }
.sb-image-placeholder small { font-size: 12px; color: #71878d; }

/* ---------- Execution strip: time and place are what a photographer acts on ---------- */
/* ---------- Phase band: 赛前/赛中/赛后三色，一眼可辨 ---------- */
.sb-phase-band { height: 10px; background: #94a3b8; }
.sb-phase-band[data-phase="PRE_EVENT"] { background: #3b82f6; }
.sb-phase-band[data-phase="EVENT_DAY"] { background: #f59e0b; }
.sb-phase-band[data-phase="POST_EVENT"] { background: #10b981; }

/* ---------- Card body ---------- */
.sb-card-body { display: grid; gap: 9px; padding: 14px 16px 16px; }
.sb-card-head { display: flex; align-items: flex-start; gap: 12px; }
.sb-card-heading { flex: 1; min-width: 0; }
.sb-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--sb-muted); font-size: 11px; }
.sb-mine-chip { padding: 2px 7px; border-radius: 5px; background: var(--sb-teal); color: #fff; font-weight: 600; }
.sb-team-chip { padding: 2px 7px; border-radius: 5px; background: #eef4f2; border: 1px solid #b9d4cd; color: #0b655e; font-weight: 600; }
.sb-completed-by { margin: 2px 0 8px; font-size: 13px; color: #0b655e; }
.sb-completed-by::before { content: "✓"; margin-right: 5px; font-weight: 700; }
/* 赛事阶段与任务标题同排：赛前/赛中/赛后色块 + 标题 */
.sb-phase-tag { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 700; line-height: 1.5; vertical-align: 2px; white-space: nowrap; }
.sb-phase-tag[data-phase="PRE_EVENT"] { background: #3b82f6; }
.sb-phase-tag[data-phase="EVENT_DAY"] { background: #f59e0b; }
.sb-phase-tag[data-phase="POST_EVENT"] { background: #10b981; }
.sb-priority { padding: 1px 6px; border-radius: 4px; background: #fff2e2; color: #9c4b17; font-weight: 600; }
.sb-optional { color: var(--sb-muted); }
.sb-card h3 { margin: 6px 0 0; color: var(--sb-ink); font-size: 17px; line-height: 1.4; overflow-wrap: anywhere; }
.sb-status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; border-radius: 999px; background: #fdf0d3; color: #92400e; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sb-status.is-done { background: #d7f0e5; color: #0b655e; }
.sb-brief { margin: 0; color: var(--sb-body); font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.sb-more { border-top: 1px dashed #dbe7e4; padding-top: 4px; }
.sb-more summary { display: flex; align-items: center; min-height: 34px; list-style: none; cursor: pointer; color: var(--sb-teal); font-size: 12px; font-weight: 600; }
.sb-more summary::-webkit-details-marker { display: none; }
.sb-more summary::after { content: '▾'; margin-left: 6px; color: var(--sb-muted); transition: transform 150ms ease; }
.sb-more[open] summary::after { transform: rotate(180deg); }
.sb-more dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 6px 0 0; font-size: 12px; }
.sb-more dt { color: var(--sb-muted); white-space: nowrap; }
.sb-more dd { margin: 0; color: var(--sb-body); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Card actions ---------- */
.sb-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--sb-line); }
.sb-card-actions > div { display: flex; gap: 12px; flex-wrap: wrap; }
.sb-card-actions button { min-height: 36px; border: 0; border-radius: 6px; background: transparent; color: var(--sb-teal); font-size: 12px; font-weight: 550; padding: 4px 0; }
.sb-card-actions .sb-delete { color: var(--sb-muted); }
.sb-card-actions .sb-delete:hover { color: #b42318; }
.sb-card-actions .sb-complete { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--sb-line); color: #42625c; }
.sb-card-actions .sb-complete.is-done { background: #edf7f3; border-color: #cbe4da; }
.sb-card-actions button:disabled { opacity: .5; cursor: wait; }
.sb-card-actions > .sb-complete:only-child { width: 100%; min-height: 48px; padding: 0; border: 0; border-radius: 0; background: var(--sb-teal); color: #fff; font-size: 15px; font-weight: 600; }
.sb-card-actions > .sb-complete.is-done:only-child { background: #eef7f4; color: var(--sb-teal); }
.sb-check { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid currentColor; border-radius: 50%; font-size: 12px; line-height: 1; }

/* ---------- Lightbox ---------- */
.shooting-lightbox { width: min(1280px, calc(100vw - 32px)); height: min(900px, calc(100dvh - 32px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 16px; overflow: hidden; background: #101b1c; color: #fff; }
.shooting-lightbox[open] { display: flex; flex-direction: column; }
.shooting-lightbox::backdrop { background: rgba(9,18,19,.82); }
.sb-lightbox-shell { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.shooting-lightbox header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 18px; background: #101b1c; color: #fff; flex-shrink: 0; }
.shooting-lightbox header > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shooting-lightbox header strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.shooting-lightbox header span { color: #a8bcba; font-size: 12px; white-space: nowrap; }
.shooting-lightbox .sb-lightbox-kicker { color: #79c6b4; font-size: 11px; }
.shooting-lightbox button { min-height: 38px; padding: 7px 11px; border: 1px solid #34504e; border-radius: 8px; background: #1b2b2b; color: #fff; font: 500 13px system-ui; cursor: pointer; white-space: nowrap; }
.shooting-lightbox button:disabled { opacity: .4; cursor: default; }
.sb-lightbox-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 16px; background: #0b1415; }
.sb-lightbox-stage img { display: block; width: auto; max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.sb-lightbox-stage.is-zoomed { align-items: flex-start; justify-content: flex-start; }
.sb-lightbox-stage.is-zoomed img { width: 200%; max-width: none; max-height: none; }
.sb-lightbox-caption { position: absolute; right: 0; bottom: 0; left: 0; padding: 18px 22px calc(18px + env(safe-area-inset-bottom)); background: rgba(20,29,29,.52); color: #fff; pointer-events: none; }
.sb-lightbox-caption-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; color: #d4e2df; font-size: 11px; }
.sb-lightbox-caption-meta span + span::before { content: '·'; margin-right: 8px; color: #9fb6b1; }
.sb-lightbox-caption h2 { margin: 0; font-size: 20px; line-height: 1.35; }
.sb-lightbox-caption p { max-width: 70ch; margin: 5px 0 0; color: #edf5f3; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.shooting-lightbox footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 18px calc(11px + env(safe-area-inset-bottom)); background: #101b1c; flex-shrink: 0; }
.shooting-lightbox footer button:disabled { color: #76908a; }
/* 「查看原图」按钮内的下载进度条：进度长在按钮里，弱网也看得见。 */
.shooting-lightbox button[data-original] { position: relative; overflow: hidden; }
.shooting-lightbox .sb-lb-bar { position: absolute; top: 0; bottom: 0; left: 0; background: rgba(121, 198, 180, .32); transition: width 140ms ease; }
.shooting-lightbox .sb-lb-label { position: relative; }
.shooting-lightbox button[data-original][data-state="done"] { border-color: #79c6b4; color: #a9e3cf; }
.shooting-lightbox button[data-original][data-state="error"] { border-color: #a05252; color: #e2a9a9; }

/* ---------- Responsive ---------- */
@media (min-width: 760px) {
  .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
@media (min-width: 1500px) {
  .sb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sb-heading { flex-direction: column; align-items: stretch; gap: 12px; padding-bottom: 16px; }
  .sb-heading h2 { font-size: 21px; }
  .sb-tools { justify-content: flex-start; }
  .shooting-brief .sb-scope-tab { min-height: 52px; padding: 12px 10px; font-size: 16px; }
  .shooting-brief .sb-phase-tab { min-height: 46px; padding-inline: 6px; font-size: 13px; }
  .sb-summary { flex-wrap: wrap; gap: 12px 16px; padding: 12px 14px; }
  .sb-progress { flex-basis: 100%; }
  .shooting-brief .sb-image { height: auto; }
  .sb-card h3 { font-size: 16px; }
  .shooting-brief .sb-filters button { min-height: 40px; }
  .sb-card-actions > .sb-complete:only-child { min-height: 52px; }
  .shooting-lightbox { width: 100vw; height: 100dvh; border-radius: 0; }
  .shooting-lightbox header { padding-top: calc(11px + env(safe-area-inset-top)); }
  .sb-lightbox-caption { padding-inline: 16px; }
  .sb-lightbox-caption h2 { font-size: 18px; }
  .sb-lightbox-caption p { font-size: 12px; }
  .sb-search input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-card, .shooting-brief button, .sb-more summary::after { transition: none; }
}

/* ---------- Role administration (admin panel) ---------- */
.sb-role-admin-list { display: grid; gap: 8px; max-height: 260px; overflow: auto; margin: 4px 0 16px; }
.sb-role-admin-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid #dce7e8; border-radius: 9px; background: #f8fbfa; }
.sb-role-admin-row > div:first-child { min-width: 0; display: grid; gap: 3px; }
.sb-role-admin-row strong { overflow-wrap: anywhere; }
.sb-role-admin-row span, .sb-role-admin-row small { color: #61757e; font-size: 12px; }
.sb-role-admin-row > div:last-child { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sb-role-admin-row button { min-height: 32px; padding: 5px 8px; font-size: 12px; }

.shooting-share-list { display: grid; gap: 10px; margin: 4px 0 6px; }
.shooting-share-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #dce7e8; border-radius: 10px; background: #f8fbfa; }
.shooting-share-info { min-width: 0; display: grid; gap: 5px; flex: 1; }
.shooting-share-info strong { font-size: 14px; }
.shooting-share-info input { width: 100%; box-sizing: border-box; min-height: 34px; padding: 6px 10px; border: 1px solid #d8e0e8; border-radius: 8px; background: #fff; color: #163047; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shooting-share-info small { color: #61757e; font-size: 12px; }
.shooting-share-row button { flex-shrink: 0; min-height: 36px; padding: 7px 12px; border: 1px solid #bcded5; border-radius: 9px; background: #dcefe9; color: var(--sb-teal); font-size: 12px; font-weight: 700; touch-action: manipulation; }
.shooting-share-row button:active { background: #c5e5dc; }

/* ---------- Task dialogs and the annotation editor (admin panel, unchanged) ---------- */
.shooting-task-dialog{max-width:680px!important;width:calc(100% - 32px);max-height:calc(100vh - 48px);overflow:auto;border-radius:18px!important;padding:24px!important}.shooting-task-dialog .modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.shooting-task-dialog form{display:grid;gap:16px}.shooting-task-dialog label{display:grid;gap:7px;font-weight:600}.shooting-task-dialog input,.shooting-task-dialog select,.shooting-task-dialog textarea{width:100%;box-sizing:border-box;border:1px solid #d8e0e8;border-radius:10px;padding:11px 12px;font:inherit;background:#fff}.shooting-task-dialog textarea{resize:vertical;min-height:74px}.shooting-task-dialog .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.shooting-reference-preview{display:block;max-width:240px;max-height:150px;object-fit:cover;border-radius:10px;border:1px solid #d8e0e8;margin-top:4px}.shooting-task-dialog .modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px;padding-top:14px;border-top:1px solid #edf1f5}@media(max-width:680px){.shooting-task-dialog{width:calc(100% - 20px);padding:18px!important}.shooting-task-dialog .form-grid{grid-template-columns:1fr}}
.shooting-task-dialog{max-width:760px!important;width:calc(100vw - 48px)!important;padding:28px!important;box-sizing:border-box}.shooting-task-dialog form{display:grid;gap:16px}.shooting-task-dialog label{display:grid;gap:7px}.shooting-task-dialog .form-grid{gap:14px}.shooting-task-dialog input,.shooting-task-dialog select,.shooting-task-dialog textarea{box-sizing:border-box;border:1px solid #d7e2e8;border-radius:10px;padding:11px 13px;background:#fbfdfe}.shooting-task-dialog .modal-head{margin-bottom:4px}.shooting-task-dialog .modal-actions{display:flex;justify-content:flex-end;gap:10px;padding-top:8px}
.shooting-task-dialog [data-preview]{max-width:220px;border-radius:10px;margin-top:6px}.shooting-task-dialog [data-preview][hidden]{display:none!important}
.shooting-editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 0;border-bottom:1px solid #dce7e8}.shooting-editor-toolbar button,.shooting-editor-toolbar label{border:1px solid #cbdde0;background:#fff;border-radius:10px;padding:8px 11px;color:#163047;font-weight:700}.shooting-editor-toolbar button.active{background:#0f8f83;color:#fff;border-color:#0f8f83}.shooting-editor-toolbar input[type=color]{width:28px;height:22px;padding:0;border:0;vertical-align:middle}.shooting-editor-stage{min-height:360px;display:flex;align-items:center;justify-content:center;background:#eff4f5;border-radius:14px;padding:16px;overflow:auto}.shooting-editor-stage canvas{max-width:100%;height:auto;box-shadow:0 6px 22px #15333a22;touch-action:none;background:#fff}
.shooting-editor-toolbar button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.shooting-editor-status{min-height:22px;padding:8px 2px;color:#607b78;font-size:13px;line-height:1.45}
@media(max-width:720px){.event-shooting-panel>.panel-head{align-items:flex-start;gap:12px}.event-shooting-panel>.panel-head .row-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.event-shooting-panel>.panel-head .row-actions button{min-width:0;white-space:normal;line-height:1.35;padding-inline:8px}.shooting-annotation-dialog{display:flex;flex-direction:column}.shooting-annotation-dialog .shooting-editor-stage{min-height:260px;max-height:calc(100vh - 330px)}.shooting-annotation-dialog .modal-actions{position:sticky;bottom:-18px;background:#fff;margin-inline:-18px;padding:12px 18px 0;z-index:2}}
@media(max-height:760px){.shooting-annotation-dialog .shooting-editor-stage{min-height:220px;max-height:calc(100vh - 360px);overflow:auto}.shooting-annotation-dialog .modal-actions{position:sticky;bottom:-28px;background:#fff;margin-inline:-28px;padding:12px 28px 0;z-index:2}}
@media(max-height:600px){.shooting-annotation-dialog .shooting-editor-stage{min-height:150px;max-height:calc(100vh - 390px);padding:8px}.shooting-annotation-dialog .modal-actions{position:static;margin:0;padding:10px 0 0}}
@media(max-width:430px){.shooting-annotation-dialog{padding:14px!important}.shooting-annotation-dialog .modal-head{margin-bottom:0}.shooting-annotation-dialog .shooting-editor-toolbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px 0}.shooting-annotation-dialog .shooting-editor-toolbar button,.shooting-annotation-dialog .shooting-editor-toolbar label{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;min-width:0;box-sizing:border-box;padding:6px 4px;font-size:12px;white-space:nowrap}.shooting-annotation-dialog .shooting-editor-toolbar input[type=range]{width:34px;min-width:0}.shooting-annotation-dialog .modal-actions>button{flex:1}}
@media(min-width:721px){.shooting-annotation-dialog canvas{max-height:58vh}}
.shooting-task-dialog:not(.shooting-annotation-dialog) { width:min(720px,100%); border-radius:12px; padding:24px; }
.shooting-task-dialog:not(.shooting-annotation-dialog) .modal-head h2 { font-size:22px; margin:0 0 8px; }
.shooting-task-dialog:not(.shooting-annotation-dialog) .modal-head p { font-size:13px; line-height:1.6; margin:0; }
#shooting-task-form { display:grid; gap:18px; }
#shooting-task-form .form-grid { gap:16px; }
#shooting-task-form label { display:grid; gap:8px; font-size:13px; font-weight:600; }
#shooting-task-form input,#shooting-task-form select,#shooting-task-form textarea { font-size:14px; font-weight:400; min-height:44px; border-radius:8px; padding:10px 12px; }
#shooting-task-form textarea { min-height:96px; }
#shooting-task-form input[type=file] { padding:12px; background:#f4f8f7; border:1px dashed #abc8c2; color:#526e69; }
#shooting-task-form input[type=file]::file-selector-button { border:1px solid #c8ded8; border-radius:6px; padding:8px 12px; margin-right:12px; background:white; color:#0f766e; font:inherit; cursor:pointer; }
#shooting-task-form small { font-size:12px; font-weight:400; }
#shooting-task-form .shooting-reference-preview { width:100%; height:160px; object-fit:contain; background:#f3f6f5; border-radius:8px; }
#shooting-task-form .shooting-reference-preview[hidden] { display:none; }
#shooting-task-form .modal-actions { margin-top:0; padding-top:16px; }
#shooting-task-form [data-assignee-field] { padding:12px; border:1px solid #cfe2de; border-radius:8px; background:#f1f8f6; }
#shooting-task-form [data-assignee-field][hidden] { display:none; }
#shooting-task-form [data-assignee-field] small { display:block; margin-top:6px; }
@media(max-width:760px) {
  .shooting-task-dialog:not(.shooting-annotation-dialog) { padding:20px; }
  #shooting-task-form input,#shooting-task-form select,#shooting-task-form textarea { font-size:16px; }
}

.shooting-task-modal { position:fixed; inset:0; display:grid; place-items:center; padding:16px; background:#10242299; z-index:1400; isolation:isolate; }
.shooting-task-modal * { box-sizing:border-box; }
.shooting-task-modal .modal-content { position:relative; background:white; color:#192e38; max-height:calc(100dvh - 32px); overflow:auto; border:1px solid #dce6e7; }
.shooting-task-modal .modal-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.shooting-task-modal .modal-head h2 { font-size:22px; }
.shooting-task-modal .muted { color:#61757e; font-size:13px; line-height:1.5; }
.shooting-task-modal button { min-height:40px; border:1px solid #dce6e7; border-radius:8px; background:white; color:#285951; padding:8px 12px; font:500 14px system-ui; cursor:pointer; }
.shooting-task-modal button.primary { color:white; background:#0f766e; border-color:#0f766e; }
.shooting-task-modal button:disabled { opacity:.45; cursor:default; }
.shooting-batch-download { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; font-size:12px; color:#61757e; }
.shooting-template-download { display:inline-flex; align-items:center; min-height:36px; padding:7px 11px; border:1px solid #b8d9d2; border-radius:8px; background:#edf8f5; color:#0f766e; font-weight:700; text-decoration:none; }
.shooting-template-download:hover { background:#dff2ec; }
.shooting-task-modal .shooting-task-dialog:not(.shooting-annotation-dialog) { max-width:720px!important; border-radius:12px!important; padding:24px!important; }
.shooting-task-modal .shooting-reference-preview { display:block; max-width:100%; max-height:160px; }
.shooting-task-modal .shooting-editor-stage { overflow:auto; }
.shooting-task-modal canvas { display:block; max-width:100%; height:auto; touch-action:none; }
.shooting-task-modal .shooting-annotation-dialog { max-width:980px!important; }
.shooting-task-modal .shooting-editor-toolbar button.active { color:#fff; background:#0f766e; border-color:#0f766e; }
@media(max-width:600px) {
  .shooting-task-modal { padding:10px; }
  .shooting-task-modal .shooting-task-dialog:not(.shooting-annotation-dialog) { width:calc(100vw - 20px)!important; padding:18px!important; }
  .shooting-task-modal .modal-actions { position:sticky; bottom:-18px; background:white; padding-bottom:8px; }
  .shooting-task-modal .modal-actions > button { flex:1; }
}

/* The internal H5 workspace reuses the same brief inside its event shell. */
.h5-shooting-workspace .h5-event-hero { color:#192e38; background:transparent; border-radius:0; box-shadow:none; border-bottom:1px solid #dce6e7; padding:0 0 20px; gap:12px; }
.h5-shooting-workspace .h5-event-hero > div > span,.h5-shooting-workspace .h5-event-hero .text-button { color:#0f766e; }
.h5-shooting-workspace .h5-event-hero p { color:#61757e; font-size:13px; }
.h5-shooting-workspace .h5-event-export a { border:1px solid #dce6e7; border-radius:8px; font-size:12px; }
.h5-shooting-workspace .h5-event-tabs { margin-inline:0; padding-inline:0; }
.h5-shooting-workspace .h5-event-tabs button { border-radius:8px; }
.h5-shooting-workspace .shooting-brief button,.h5-shooting-workspace .shooting-brief input,.h5-shooting-workspace .shooting-brief select { scroll-margin-top:90px; scroll-margin-bottom:30px; }

/* ---------- 方案 A · 大图沉浸卡（仅窄屏；桌面保持全宽大图+常规排版） ----------
   照片改为全宽 4:3 置顶，标题/状态压在图片渐变上；「构图与拍摄要求」
   移到图片下方完整显示（不截断，可点标题折叠）。文字多时卡片自然变高，
   灯箱里也有全文。纯 CSS 实现：display:contents 把 body 拆成网格项。 */
@media (max-width: 640px) {
  .sb-card { display: grid; overflow: hidden; }
  /* 大图占 1-2 两行；第二行给标题叠放用 */
  .shooting-brief .sb-card > .sb-image { grid-row: 1 / span 2; grid-column: 1; width: 100%; border-bottom: 0; border-radius: 0; align-self: start; }
  .shooting-brief .sb-stack { aspect-ratio: 4 / 3; }
  .shooting-brief .sb-stack-solo .sb-stack-1, .sb-stack-1 { inset: 0; border-radius: 0; box-shadow: none; }
  .sb-stack-2, .sb-stack-3 { display: none; }
  .sb-photo-count { top: 10px; left: 10px; }
  .sb-image-label { right: 10px; bottom: 10px; }
  .shooting-brief .sb-stack-solo .sb-image-label { right: 10px; bottom: 10px; }
  .sb-phase-band { display: none; }

  /* body 拆解为网格项：head 叠图底，brief/more 排图下 */
  .sb-card-body { display: contents; }
  .sb-card-head { grid-row: 2; grid-column: 1; align-self: end; z-index: 5; align-items: flex-end; gap: 10px; padding: 64px 12px 12px; background: linear-gradient(transparent, rgba(10,20,19,.5) 38%, rgba(10,20,19,.88) 72%, rgba(10,20,19,.95)); color: #fff; }
  .sb-card-head .sb-card-meta { color: rgba(255,255,255,.92); }
  /* 我的任务 chip：实底青色白字（白底照片上也清晰） */
  .sb-card-head .sb-mine-chip { background: var(--sb-teal); color: #fff; }
  .sb-card-head .sb-team-chip { background: rgba(255,255,255,.94); border-color: transparent; }
  .sb-card-head .sb-priority { background: rgba(255,242,226,.92); }
  .sb-card .sb-card-head h3 { color: #fff; font-size: 16px; text-shadow: 0 1px 5px rgba(0,0,0,.6); }
  .sb-card .sb-status { background: rgba(255,255,255,.94); backdrop-filter: blur(4px); }
  .sb-card .sb-status.is-done { background: rgba(215,240,229,.96); }

  /* 图下文字区：构图与拍摄要求全文显示，不截断 */
  .sb-brief { grid-column: 1; margin: 10px 14px 0; font-size: 12.5px; }
  .sb-completed-by { grid-column: 1; margin: 8px 14px 0; }
  .sb-more { grid-column: 1; margin: 6px 14px 2px; border-top: 0; padding-top: 0; }
  .sb-more summary { min-height: 36px; font-size: 13px; }
  .sb-more dl { grid-template-columns: auto 1fr; gap: 6px 12px; margin: 4px 0 8px; font-size: 12.5px; line-height: 1.6; }
  .sb-more dt { color: #8aa19c; }
  .sb-more dd { color: #33474a; }

  /* 完成键收窄为右下胶囊，不再占整行 */
  .sb-card-actions { grid-column: 1; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); justify-content: flex-end; border-top: 1px solid var(--sb-line); }
  .sb-card-actions > .sb-complete:only-child { width: auto; min-height: 36px; padding: 7px 18px; border-radius: 999px; background: var(--sb-teal); color: #fff; font-size: 13.5px; }
  .sb-card-actions > .sb-complete.is-done:only-child { background: #eef7f4; color: var(--sb-teal); }

  /* 无图占位卡：标题不压图，回到普通排版（现代浏览器 :has 支持） */
  .sb-card:has(.sb-image-placeholder) > .sb-image { grid-row: 1; height: 150px; }
  .sb-card:has(.sb-image-placeholder) .sb-card-head { position: static; grid-row: auto; background: none; color: inherit; padding: 12px 14px 0; }
  .sb-card:has(.sb-image-placeholder) .sb-card-head h3 { color: var(--sb-ink); text-shadow: none; }
  .sb-card:has(.sb-image-placeholder) .sb-card-head .sb-card-meta { color: var(--sb-muted); }
}

/* ===== 灯箱：构图/备注（有则显示，无则整行隐藏）===== */
.sb-lightbox-notes { display: grid; gap: 4px; margin-top: 7px; }
.sb-lightbox-note { display: flex; gap: 8px; margin: 0; max-width: 72ch; color: #edf5f3; font-size: 13px; line-height: 1.55; white-space: pre-wrap; }
.sb-lightbox-note .sb-note-label { flex-shrink: 0; align-self: flex-start; margin-top: 1px; padding: 1px 7px; border-radius: 5px; background: rgba(121,198,180,.18); color: #9fdcc8; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.sb-lightbox-note[data-note="brief"] .sb-note-label { background: rgba(240,200,120,.16); color: #ecd3a0; }

/* ===== 灯箱：点图片可隐藏/恢复底部说明，把面积还给照片 ===== */
.sb-lightbox-caption { transition: opacity .18s ease; }
.sb-lightbox-stage.caption-hidden .sb-lightbox-caption { opacity: 0; }

/* ===== 手机：压缩灯箱上下边框，图片显示区域最大化 ===== */
@media (max-width: 640px) {
  .sb-lightbox-stage { padding: 6px; }
  .shooting-lightbox header { padding: 9px 12px; }
  .shooting-lightbox header strong { font-size: 13px; }
  .shooting-lightbox header button { min-height: 32px; padding: 5px 10px; }
  .shooting-lightbox footer { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); gap: 7px; }
  .shooting-lightbox footer button { min-height: 36px; padding: 6px 9px; font-size: 12px; }
  .sb-lightbox-caption { padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .sb-lightbox-caption h2 { font-size: 16px; }
  .sb-lightbox-notes { gap: 3px; margin-top: 5px; }
  .sb-lightbox-note { font-size: 12px; }
  .sb-lightbox-note .sb-note-label { font-size: 10px; padding: 1px 6px; }
}
.sb-lightbox-note[hidden] { display: none; }
.sb-lightbox-note[data-note="parameters"] .sb-note-label { background: rgba(130,160,235,.16); color: #b6c8ef; }