:root {
  color-scheme: light;
  --bg: #f4f4f4;
  --panel: #ffffff;
  --panel-soft: #fff0f2;
  --muted: #765d61;
  --text: #40545f;
  --accent: #f90019;
  --accent-dark: #f90019;
  --accent-rgb: 249,0,25;
  --line: rgba(var(--accent-rgb),.18);
  --error: #a8071f;
  --overlap-size: 20%;
  --overlap-scale: 500%;
  --overlap-offset: -400%;
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-controls-inset: var(--safe-area-bottom);
  --bottom-action-gap: calc(16px + var(--bottom-controls-inset));
}

/* Some embedded WebViews report a zero safe-area inset even when system
   navigation overlays the page. Reserve a conservative floor on touch devices
   without depending on the host app or guessing from the device screen size.
   Use max(), not addition, so a real reported inset is never counted twice. */
@media (any-pointer: coarse) {
  :root { --bottom-controls-inset: max(48px, var(--safe-area-bottom)); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: Inter, system-ui, -apple-system, sans-serif; }
body { min-height: 100vh; min-height: 100dvh; overflow: hidden; }
.auth-pending main, .auth-denied main { visibility: hidden; }
.auth-gate { position: fixed; z-index: 100; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 28px; background: var(--bg); text-align: center; }
.auth-gate h1 { margin-top: 8px; color: var(--accent-dark); font-size: 24px; }
.auth-gate p { max-width: 300px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.auth-gate-loader { display: none; width: 104px; height: 104px; }
body.auth-pending { background: #F90019; }
.auth-pending .auth-gate { gap: 12px; background: #F90019; color: white; }
.auth-pending .auth-gate-loader { display: block; }
.startup-spinner[hidden], .auth-denied .startup-spinner, #authGate[aria-busy="false"] .startup-spinner { display: none; }
.auth-pending .auth-gate h1 { margin: 0; color: white; font-size: 14px; font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.auth-pending .auth-gate p { display: none; }
.startup-retry { min-height: 44px; margin-top: 13px; padding: 11px 26px; border: 0; border-radius: 10px; background: var(--accent); color: white; font-size: 14px; font-weight: 700; }
.startup-retry[hidden] { display: none; }
.startup-retry:disabled { opacity: .6; }
button { color: inherit; font: inherit; cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible { outline: 3px solid rgba(var(--accent-rgb),.32); outline-offset: 3px; }
main { height: 100vh; height: 100dvh; overflow-y: auto; }
.page { display: none; min-height: 100%; padding: max(22px, env(safe-area-inset-top)) 20px calc(32px + var(--bottom-controls-inset)); }
.page.active { display: block; }
#cameraPage.page.active { height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
#cameraPage > header { display: none; }
.page > header { display: flex; justify-content: space-between; align-items: center; margin: -10px -20px 14px; padding: 10px 20px; background: transparent; }
h1 { margin: 0; font-size: clamp(25px, 7.2vw, 34px); letter-spacing: -.04em; }
.screen-heading { min-width: 0; display: flex; align-items: center; gap: 10px; }
.screen-heading h1 { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: clamp(19px, 5.2vw, 24px); text-overflow: ellipsis; white-space: nowrap; }
.screen-logo { flex: 0 0 auto; display: block; width: 42px; height: 42px; object-fit: contain; }
.new-capture-button { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; padding: 0 0 2px; border: 1px solid rgba(var(--accent-rgb),.32); border-radius: 50%; background: var(--accent); color: white; box-shadow: 0 5px 14px rgba(var(--accent-rgb),.18); font-size: 27px; font-weight: 400; line-height: 1; }
.new-capture-button[hidden] { display: none; }
.new-capture-button:disabled { opacity: .4; }
.header-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.camera-resolution { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .02em; }
.app-menu-wrap { position: relative; flex: 0 0 auto; display: none; }
.debug-enabled .app-menu-wrap { display: block; }
.menu-button { width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--accent); box-shadow: 0 5px 16px rgba(var(--accent-rgb),.08); font-size: 24px; line-height: 1; }
.app-menu { position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; width: 150px; padding: 6px; border: 1px solid var(--line); border-radius: 13px; background: var(--panel); box-shadow: 0 14px 34px rgba(71,0,11,.2); }
.app-menu.hidden { display: none; }
.app-menu button { width: 100%; padding: 11px 12px; border: 0; border-radius: 9px; background: var(--panel-soft); color: var(--accent-dark); text-align: left; font-size: 12px; font-weight: 800; }
.app-menu-version { display: block; padding: 9px 12px 5px; color: var(--muted); font-size: 10px; font-weight: 750; letter-spacing: .04em; }
.viewfinder-stage { min-height: 0; width: calc(100% + 40px); margin-inline: -20px; display: grid; place-items: center; overflow: hidden; background: #160205; }
.viewfinder { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 4; border: 0; border-radius: 0; background: #250309; cursor: crosshair; touch-action: manipulation; }
video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
video.ready { visibility: visible; }
.placeholder { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: rgba(255,255,255,.72); line-height: 1.5; }
.placeholder.hidden { display: none; }
.camera-symbol { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 8px; color: white; }
.camera-symbol svg { display: block; width: 46px; height: 46px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.focus-frame { position: absolute; inset: 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 0; pointer-events: none; }
.focus-frame::before, .focus-frame::after { content: ''; position: absolute; background: rgba(255,255,255,.75); }
.focus-frame::before { width: 24px; height: 2px; left: calc(50% - 12px); top: 50%; }
.focus-frame::after { height: 24px; width: 2px; left: 50%; top: calc(50% - 12px); }
.level-meter { position: absolute; z-index: 2; left: 50%; top: 50%; width: 170px; height: 48px; transform: translate(-50%, -50%); pointer-events: none; opacity: .9; }
.level-meter.hidden { display: none; }
.level-target { position: absolute; left: 0; right: 0; top: 23px; height: 2px; background: linear-gradient(90deg, rgba(255,255,255,.65) 0 22%, transparent 22% 78%, rgba(255,255,255,.65) 78% 100%); }
.level-line { position: absolute; left: 50%; top: 21px; width: 78px; height: 5px; margin-left: -39px; border-radius: 5px; background: #ff324f; box-shadow: 0 1px 8px rgba(0,0,0,.65); transform-origin: center; transition: background-color .15s, box-shadow .15s; }
.level-meter.level .level-line { background: #5bea91; box-shadow: 0 0 14px rgba(91,234,145,.8); }
.level-meter.wrong-orientation .level-line { background: #ff7884; box-shadow: 0 0 14px rgba(255,120,132,.72); }
.level-value { position: absolute; top: -12px; left: 50%; min-width: 54px; transform: translateX(-50%); padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,.48); color: white; text-align: center; font-size: 12px; font-weight: 800; }
.level-meter.level .level-value { color: #75f2a6; }
.level-meter.wrong-orientation .level-value { color: #ff8e98; }
.sequence-overlay { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.direction-choices { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.direction-choices.hidden { display: none; }
.direction-choices button { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 112px; height: 104px; padding: 0; border: 0; background: transparent; color: white; font-size: 68px; font-weight: 300; line-height: 1; text-shadow: 0 3px 12px rgba(0,0,0,.8); pointer-events: auto; }
.direction-label { padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,.65); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.direction-choices button.hidden { display: none; }
.direction-down { left: 50%; bottom: 27%; transform: translateX(-50%); }
.direction-down:active { transform: translateX(-50%) scale(.88); }
.direction-right { top: 50%; right: 8%; transform: translateY(-50%); }
.direction-right:active { transform: translateY(-50%) scale(.88); }
.overlap-guide { position: absolute; z-index: 0; overflow: hidden; opacity: .5; border-color: white; border-style: dashed; }
.overlap-guide.hidden { display: none; }
.overlap-guide img { position: absolute; display: block; object-fit: fill; }
.overlap-guide span { position: absolute; z-index: 1; padding: 4px 7px; border-radius: 7px; background: rgba(0,0,0,.72); color: white; font-size: 9px; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.overlap-guide.move-down { inset: 0 0 auto; width: 100%; height: var(--overlap-size); border-width: 0 0 2px; }
.overlap-guide.move-down img { left: 0; top: var(--overlap-offset); width: 100%; height: var(--overlap-scale); }
.overlap-guide.move-down span { left: 8px; bottom: 7px; }
.overlap-guide.move-right { inset: 0 auto 0 0; width: var(--overlap-size); height: 100%; border-width: 0 2px 0 0; }
.overlap-guide.move-right img { left: var(--overlap-offset); top: 0; width: var(--overlap-scale); height: 100%; }
.overlap-guide.move-right span { left: 50%; bottom: 22px; transform: translateX(-50%) rotate(-90deg); }
.flash { position: absolute; inset: 0; background: white; opacity: 0; pointer-events: none; }
.flash.on { animation: flash .25s ease-out; }
@keyframes flash { 0% { opacity: .9 } 100% { opacity: 0 } }
.capture-notice { position: absolute; z-index: 8; left: 18px; right: 18px; bottom: 102px; padding: 13px 16px; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; background: rgba(168,7,31,.94); color: #fff; text-align: center; font-size: 13px; font-weight: 800; opacity: 0; transform: translateY(12px); transition: opacity .2s, transform .2s; pointer-events: none; }
.capture-notice.visible { opacity: 1; transform: translateY(0); }
.status { min-height: 16px; max-height: 30px; margin: 5px 4px 0; overflow: hidden; color: var(--muted); text-align: center; font-size: 11px; line-height: 1.3; }
.status.error { color: var(--error); font-weight: 700; }
.camera-actions { position: absolute; z-index: 6; top: clamp(16px, calc(100dvh - 285px), calc(100% - 86px)); right: 0; left: 0; display: grid; grid-template-columns: 1fr 72px 1fr; align-items: center; padding: 0 16px; pointer-events: none; }
.camera-actions > * { pointer-events: auto; }
.shutter { width: 70px; height: 70px; padding: 5px; border: 3px solid rgba(255,255,255,.9); border-radius: 50%; background: rgba(255,255,255,.2); box-shadow: 0 8px 24px rgba(0,0,0,.26); backdrop-filter: blur(7px); }
.shutter span { display: block; width: 100%; height: 100%; border-radius: 50%; background: rgba(var(--accent-rgb),.76); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); transition: transform .12s; }
.shutter:active span { transform: scale(.88); }
.shutter:disabled { opacity: .42; }
.shutter:disabled span { background: rgba(198,174,178,.7); }
.mini-capture-grid { position: absolute; z-index: 6; top: 14px; right: 14px; width: min(var(--compact-grid-width, 44px), 44vw, 180px); max-width: min(44vw, 180px); display: grid; grid-template-columns: repeat(var(--mini-column-count, 1), minmax(0, 1fr)); gap: 3px; padding: 5px; overflow: hidden; border: 1px solid rgba(255,255,255,.42); background: rgba(26,0,4,.3); box-shadow: 0 7px 20px rgba(0,0,0,.16); backdrop-filter: blur(5px); pointer-events: none; scrollbar-width: none; }
.mini-capture-grid.expanded { top: 50%; right: 50%; width: min(var(--expanded-grid-width, 190px), calc(100% - 28px)); max-width: calc(100% - 28px); grid-template-columns: repeat(var(--mini-column-count, 1), minmax(42px, 1fr)); gap: 5px; padding: 7px; overflow-x: auto; overscroll-behavior-x: contain; background: rgba(26,0,4,.34); transform: translate(50%, -50%); pointer-events: auto; touch-action: pan-x; }
.mini-capture-grid.expanded.fit-expanded { width: min(var(--expanded-grid-width, 190px), calc(100% - 80px)); max-width: calc(100% - 80px); height: min(var(--expanded-grid-height, 190px), calc(100% - 80px)); max-height: calc(100% - 80px); grid-template-columns: repeat(var(--mini-column-count, 1), minmax(0, 1fr)); overflow: hidden; touch-action: manipulation; }
.mini-capture-grid.expanded.fit-expanded .mini-grid-cell { align-self: center; height: auto; }
.mini-capture-grid::-webkit-scrollbar { display: none; }
.mini-capture-grid.hidden { display: none; }
.mini-grid-cell { position: relative; overflow: hidden; width: 100%; min-width: 0; height: auto; aspect-ratio: var(--thumbnail-aspect-ratio, var(--grid-cell-aspect-ratio, 3 / 4)); padding: 0; border: 1px solid rgba(255,255,255,.25); border-radius: 0; background: rgba(255,255,255,.09); color: white; }
.mini-grid-cell img { display: block; width: 100%; height: 100%; object-fit: contain; }
.mini-grid-cell.captured { border-color: rgba(255,255,255,.75); }
.mini-grid-cell.available:not(.captured)::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.82); font-size: 18px; font-weight: 500; }
.mini-grid-cell.readonly-empty { border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.035); }
.mini-grid-cell:disabled { opacity: .48; }
.mini-grid-cell:focus-visible { outline: 2px solid white; outline-offset: -2px; }
.mini-grid-cell.current { border-color: rgba(255,255,255,.95); box-shadow: inset 0 0 0 2px rgba(var(--accent-rgb),.78), 0 0 7px rgba(255,255,255,.42); }
.mini-capture-grid.expanded .mini-grid-cell.add-row,
.mini-capture-grid.expanded .mini-grid-cell.add-column { border-style: dashed; background: rgba(255,255,255,.14); }
.mini-capture-grid.expanded .mini-grid-cell.add-column::before { content: 'K'; position: absolute; right: 2px; bottom: 1px; color: rgba(255,255,255,.72); font-size: 7px; font-weight: 900; }
.grid-management-mode .camera-actions,
.grid-management-mode .focus-frame,
.grid-management-mode .level-meter { display: none; }
.grid-management-mode .viewfinder { width: 100% !important; height: 100% !important; aspect-ratio: auto !important; background: #180509; cursor: default; }
.grid-management-mode video { visibility: hidden; }
.grid-management-mode .placeholder { place-content: end center; padding: 26px 22px 86px; background: radial-gradient(circle at 18% 12%, rgba(var(--accent-rgb),.3), transparent 34%), radial-gradient(circle at 88% 78%, rgba(var(--accent-rgb),.22), transparent 38%), repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 13px), linear-gradient(155deg, #2c0a11 0%, #170509 52%, #090203 100%); }
.grid-management-mode .camera-symbol { display: none; }
.grid-management-mode .placeholder p { margin: 0; padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(0,0,0,.2); color: rgba(255,255,255,.72); font-size: 11px; font-weight: 700; line-height: 1.3; backdrop-filter: blur(6px); }
.grid-management-mode .placeholder p:empty { display: none; }
.capture-exit { position: absolute; z-index: 7; bottom: 16px; left: 16px; width: 58px; height: 58px; display: grid; place-items: center; padding: 0; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(43,11,16,.64); color: white; box-shadow: 0 9px 24px rgba(0,0,0,.3); backdrop-filter: blur(7px); transition: opacity .16s, transform .12s; }
.capture-exit svg { display: block; width: 28px; height: 28px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.capture-exit:active { transform: scale(.9); }
.capture-exit:disabled { opacity: .42; }
.capture-exit.hidden { display: none; }
.finish-capture { position: absolute; z-index: 7; right: 16px; bottom: 16px; width: 58px; height: 58px; padding: 0; border: 2px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(var(--accent-rgb),.93); color: white; box-shadow: 0 9px 24px rgba(0,0,0,.3); font-size: 34px; font-weight: 500; line-height: 1; backdrop-filter: blur(7px); transition: opacity .16s, transform .12s; }
.finish-capture:active { transform: scale(.9); }
.finish-capture:disabled { opacity: .42; }
.finish-capture.hidden { display: none; }
.album-count { flex-shrink: 0; color: var(--muted); font-size: 12px; white-space: nowrap; }
.header-version { flex: 0 0 auto; color: var(--muted); font-size: 10px; font-weight: 750; white-space: nowrap; }
.group-list { display: grid; gap: 12px; padding-bottom: 16px; }
.visit-completion { position: sticky; z-index: 35; bottom: 0; display: grid; gap: 8px; margin: 4px -8px 0; padding: 12px 8px calc(12px + var(--bottom-controls-inset)); background: linear-gradient(180deg, rgba(244,244,244,0), rgba(244,244,244,.94) 22%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.visit-completion.hidden { display: none; }
.visit-completion button { width: 100%; min-height: 52px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--accent); color: white; box-shadow: 0 8px 20px rgba(var(--accent-rgb),.22); font-size: 13px; font-weight: 850; }
.visit-completion button:disabled { background: #c8c1c3; color: rgba(255,255,255,.9); box-shadow: none; }
.manual-upload-panel { display: grid; gap: 10px; margin: 16px 0 8px; }
.manual-upload-panel[hidden], .manual-upload-button[hidden] { display: none; }
.manual-upload-panel p { margin: 0; color: var(--muted); font-size: 12px; text-align: center; }
.manual-upload-button { width: 100%; min-height: 48px; padding: 12px 20px; border: 1px solid var(--text); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 750; cursor: pointer; }
.manual-upload-button:disabled { border-color: #bbb; color: #999; cursor: default; }
.cooler-report-page > .manual-upload-button { margin: 4px 0 16px; }
.scene-empty { margin: 18vh auto 0; max-width: 280px; color: var(--muted); text-align: center; font-size: 13px; line-height: 1.55; }
.group-card { --group-state: #ff7a00; --group-state-halo: #fff0d8; position: relative; width: 100%; min-height: 0; display: grid; gap: 12px; padding: 18px; border: 1px solid rgba(64,84,95,.08); border-radius: 22px; background: var(--panel); color: var(--text); text-align: left; box-shadow: 0 5px 16px rgba(43,11,16,.035); content-visibility: auto; contain-intrinsic-size: auto 178px; }
.group-card > :not(.group-card-open) { position: relative; z-index: 1; pointer-events: none; }
.group-card > .group-card-header { z-index: 3; }
.group-card button { pointer-events: auto; }
.group-card .group-overflow,
.group-card .group-overflow summary { pointer-events: auto; }
.group-card-open { position: absolute; z-index: 0; inset: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.group-card-open:focus-visible { outline: 3px solid rgba(var(--accent-rgb),.32); outline-offset: 3px; }
.group-card-reviewing { --group-state: #ff3d00; --group-state-halo: #ffe3da; }
.group-card-validated { --group-state: #188f1e; --group-state-halo: #ddf4df; }
.group-card-rejected { --group-state: #e60000; --group-state-halo: #fbdada; }
.group-card-header { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.group-card-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.group-local-report-button { border: 0; background: transparent; color: inherit; font: inherit; font-size: 12px; font-weight: 700; text-decoration: underline; padding: 6px; cursor: pointer; }
.group-card-title-group { min-width: 0; flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.group-card-title { overflow: hidden; color: var(--text); font-size: clamp(18px, 4.5vw, 22px); font-weight: 720; text-overflow: ellipsis; white-space: nowrap; }
.group-door-icon { flex: 0 0 auto; display: block; width: 23px; height: 23px; }
.group-card-status { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--group-state); font-size: clamp(14px, 3.6vw, 17px); font-weight: 750; line-height: 1.15; white-space: nowrap; }
.group-card-status-dot { width: 18px; height: 18px; border: 4px solid var(--group-state-halo); border-radius: 50%; background: var(--group-state); box-sizing: content-box; }
.group-overflow { position: relative; }
.group-overflow summary { list-style: none; }
.group-overflow summary::-webkit-details-marker { display: none; }
.group-overflow-toggle { width: 30px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--text); font-size: 22px; font-weight: 750; line-height: 1; cursor: pointer; }
.group-overflow[open] .group-overflow-toggle { color: var(--accent); }
.group-overflow-menu { position: absolute; z-index: 5; top: calc(100% + 6px); right: 0; min-width: 146px; display: grid; gap: 3px; padding: 5px; border: 1px solid rgba(64,84,95,.14); border-radius: 11px; background: white; box-shadow: 0 10px 26px rgba(32,42,48,.16); }
.group-overflow-menu button { width: 100%; min-height: 36px; padding: 8px 10px; border: 0; border-radius: 8px; background: #f4f4f4; color: var(--text); text-align: left; font-size: 11px; font-weight: 800; white-space: nowrap; }
.group-overflow-menu .group-overflow-delete { color: var(--accent); }
.group-card-divider { display: block; height: 1px; background: rgba(64,84,97,.18); }
.group-card-report { padding: 5px 0; }
.group-card-report-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.group-card-report-item { display: grid; grid-template-columns: 19px minmax(0, 1fr); align-items: start; gap: 8px; color: var(--muted); font-size: clamp(11.5px, 2.9vw, 13.5px); font-weight: 650; letter-spacing: -.015em; line-height: 1.3; }
.group-card-report-item.report-check-passed { color: #49ca3e; }
.group-card-report-item.report-check-failed { color: var(--accent); }
.group-card-report-icon { display: block; width: 19px; height: 19px; margin-top: -1px; }
.group-card-body { position: relative; min-width: 0; min-height: 92px; }
.group-card-has-history .group-card-body { display: grid; grid-template-columns: minmax(0, 1fr) min(124px, 42%); align-items: end; gap: 12px; }
.group-card-metadata { min-width: 0; display: grid; gap: 7px; }
.group-card-metadata p { min-width: 0; margin: 0; color: var(--text); font-size: clamp(13px, 3.3vw, 15.5px); line-height: 1.25; }
.group-card-metadata p:nth-last-child(-n+2) { padding-right: 178px; }
.group-card-has-history .group-card-metadata p { padding-right: 0; }
.group-card-metadata strong { font-weight: 850; }
.group-card-action-panel { position: absolute; right: 0; bottom: 0; width: 124px; display: grid; justify-items: stretch; gap: 7px; }
.group-card-has-history .group-card-action-panel { position: static; width: 100%; gap: 7px; }
.group-card-has-history .group-primary-action { width: 100%; }
.group-primary-action { min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 13px; border: 0; border-radius: 999px; background: #45cd3b; color: white; box-shadow: 0 6px 14px rgba(69,205,59,.18); font-size: 14px; font-weight: 780; white-space: nowrap; }
.group-primary-action:disabled { background: #d1d1d3; box-shadow: none; color: white; }
.group-primary-action.is-passive { background: #d1d1d3; box-shadow: none; color: white; cursor: help; }
.group-camera-icon { display: block; width: 21px; height: 21px; }
.group-history-button { width: 100%; max-width: 100%; min-width: 0; min-height: 42px; display: grid; grid-template-columns: auto auto auto; align-items: center; justify-self: end; gap: 5px; padding: 7px 9px; border: 1px solid rgba(64,84,95,.14); border-radius: 999px; background: white; color: var(--text); box-shadow: 0 5px 14px rgba(32,42,48,.06); text-align: left; }
.group-history-icon { display: block; width: 18px; height: 18px; }
.group-history-label { overflow: hidden; font-size: 9.5px; font-weight: 800; letter-spacing: -.02em; text-overflow: ellipsis; white-space: nowrap; }
.group-history-chevron { margin-top: -1px; font-size: 22px; font-weight: 350; line-height: .8; }
.group-history-button[hidden] { display: none; }
.settings-page { padding-bottom: calc(24px + var(--bottom-controls-inset)); }
.settings-close { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--accent); font-size: 12px; font-weight: 800; }
.settings-card { display: grid; gap: 11px; margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); box-shadow: 0 8px 22px rgba(var(--accent-rgb),.07); }
.settings-card.hidden { display: none; }
.settings-card > label, .settings-card h2 { margin: 0; color: var(--text); font-size: 14px; font-weight: 850; }
.settings-card select { width: 100%; min-width: 0; padding: 11px 34px 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-soft); color: var(--accent-dark); font: inherit; font-size: 12px; font-weight: 750; }
.debug-request-log-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.debug-request-log-header button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-soft); color: var(--accent); font-size: 10px; font-weight: 850; }
.debug-request-log { display: grid; gap: 8px; max-height: 300px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.debug-request-log li { display: grid; gap: 4px; padding: 9px 10px; border-left: 3px solid #29a638; border-radius: 9px; background: var(--panel-soft); font-size: 10px; }
.debug-request-log li.debug-request-log-error { border-left-color: var(--accent); }
.debug-request-log strong { color: var(--text); font-size: 10px; }
.debug-request-log code { overflow-wrap: anywhere; color: var(--accent-dark); font: 9px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.debug-request-log span { color: var(--muted); font-size: 9px; }
.debug-request-log details { display: grid; gap: 5px; }
.debug-request-log summary { cursor: pointer; color: var(--accent-dark); font-size: 9px; font-weight: 800; }
.debug-request-log pre { max-height: 220px; margin: 0; padding: 8px; overflow: auto; border-radius: 7px; background: #2b0b10; color: #fff1f3; font: 9px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.debug-request-log .debug-request-log-empty { border-left-color: var(--line); color: var(--muted); }
.settings-hint { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.resolution-recommendation { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 12px; background: #fff1f3; }
.resolution-recommendation.hidden { display: none; }
.resolution-recommendation strong { color: var(--accent-dark); font-size: 12px; }
.resolution-recommendation p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.resolution-recommendation button { justify-self: start; padding: 8px 10px; border: 0; border-radius: 9px; background: var(--accent); color: white; font-size: 11px; font-weight: 850; }
.parameter-list { display: grid; gap: 8px; margin: 0; }
.parameter-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 10px; background: var(--panel-soft); }
.parameter-list dt { color: var(--muted); font-size: 12px; }
.parameter-list dd { min-width: 0; margin: 0; color: var(--accent-dark); text-align: right; overflow-wrap: anywhere; font-size: 11px; font-weight: 850; }
.menu-button:disabled { opacity: .45; }
.pwa-update { position: fixed; z-index: 80; right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); left: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 520px; margin: auto; padding: 12px 14px; border: 1px solid rgba(255,255,255,.55); border-radius: 14px; background: var(--accent-dark); color: white; box-shadow: 0 14px 36px rgba(71,0,11,.3); font-size: 12px; font-weight: 750; }
.pwa-update.hidden { display: none; }
.pwa-update button { flex: 0 0 auto; padding: 7px 10px; border: 0; border-radius: 9px; background: white; color: var(--accent-dark); font-size: 11px; font-weight: 850; }
.pwa-update[aria-busy="true"] button { opacity: .72; }
.visit-loading-overlay { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); cursor: wait; overscroll-behavior: contain; }
.visit-loading-overlay[hidden] { display: none; }
.loading-spinner { position: relative; width: 44px; height: 44px; }
.loading-spinner span { position: absolute; top: 0; left: 20px; width: 4px; height: 11px; border-radius: 3px; background: #fff; transform-origin: 2px 22px; transform: rotate(calc(var(--spoke) * 30deg)); opacity: .2; animation: loading-spoke-fade 1s linear infinite; animation-delay: calc(var(--spoke) * -.083333s); }
@keyframes loading-spoke-fade { from { opacity: 1; } to { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .loading-spinner span { animation: none; opacity: .6; } }
.auth-recovery { position: fixed; z-index: 36; top: calc(70px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 540px; margin: auto; padding: 12px 14px; border: 1px solid #ef9a9a; border-radius: 14px; background: rgba(74,5,16,.96); color: white; box-shadow: 0 12px 32px rgba(36,2,8,.35); }
.auth-recovery.hidden { display: none; }
.auth-recovery > div { display: grid; gap: 3px; min-width: 0; }
.auth-recovery strong { font-size: 13px; }
.auth-recovery span { color: #ffd7de; font-size: 11px; line-height: 1.35; }
.auth-recovery button { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: white; color: var(--accent-dark); font-weight: 900; }
#photoDialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: #240208; color: white; }
#photoDialog::backdrop { background: #240208; }
#photoDialog img { width: 100%; height: calc(100% - 82px - var(--bottom-controls-inset)); object-fit: contain; }
dialog:not(#photoDialog):not(.capture-exit-sheet):not(.capture-warning-modal):not(:where(.product-analysis-dialog,.column-stitch-dialog)) { inset: 0; width: min(90vw, 420px); max-width: 420px; height: fit-content; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 0; border-radius: 18px; background: var(--panel); color: var(--text); }
dialog:not(#photoDialog):not(.capture-exit-sheet):not(.capture-warning-modal):not(:where(.product-analysis-dialog,.column-stitch-dialog))::backdrop { background: rgba(36,2,8,.72); }
dialog:not(#photoDialog):not(.capture-exit-sheet):not(.capture-warning-modal):not(:where(.product-analysis-dialog,.column-stitch-dialog)) form { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.dialog-close { position: fixed; z-index: 2; top: max(18px, env(safe-area-inset-top)); right: 18px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.55); font-size: 30px; }
.dialog-footer { min-height: calc(82px + var(--bottom-controls-inset)); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px calc(12px + var(--bottom-controls-inset)); }
.dialog-footer time { color: #ffd7de; font-size: 13px; }
.dialog-actions { display: flex; gap: 8px; }
.retake-button { border: 1px solid white; border-radius: 12px; padding: 10px 12px; background: white; color: var(--accent-dark); font-weight: 700; }
.delete-button { border: 1px solid #ff9aaa; border-radius: 12px; padding: 10px 14px; background: transparent; color: white; font-weight: 700; }
.delete-button:disabled { opacity: .35; }
.dialog-actions button[hidden] { display: none; }
.display-type-dialog { width: min(90vw, 380px); height: auto; margin: auto; padding: 0; border-radius: 18px; background: var(--panel); color: var(--text); }
.display-type-dialog::backdrop { background: rgba(36,2,8,.72); }
.display-type-dialog form { display: grid; gap: 12px; padding: 20px; }
.display-type-dialog h2 { margin: 0; color: var(--accent-dark); font-size: 18px; }
.display-type-dialog p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.equipment-history-dialog form { display: grid; gap: 14px; padding: 20px; }
.equipment-history-dialog h2 { margin: 0; color: var(--accent-dark); font-size: 18px; }
.equipment-history-list { display: grid; gap: 8px; max-height: min(55dvh, 420px); margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.equipment-history-list li { padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel-soft); color: var(--text); font-size: 12px; font-weight: 750; }
.equipment-history-close { justify-self: end; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--accent-dark); font-size: 11px; font-weight: 850; }
.finish-capture-dialog { width: min(90vw, 400px); height: auto; margin: auto; padding: 0; border-radius: 18px; background: var(--panel); color: var(--text); }
.finish-capture-dialog::backdrop { background: rgba(36,2,8,.72); }
.finish-capture-dialog form { display: grid; gap: 14px; padding: 20px; }
.finish-capture-dialog h2 { margin: 0; color: var(--accent-dark); font-size: 18px; }
.finish-capture-dialog p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.finish-capture-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.finish-capture-actions button { min-height: 42px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); color: var(--text); font-weight: 800; }
.finish-capture-actions .primary { grid-column: 1 / -1; border-color: var(--accent); background: var(--accent); color: white; }
.confirmation-dialog form { display: grid; gap: 14px; padding: 20px; }
.confirmation-dialog h2 { margin: 0; color: var(--accent-dark); font-size: 18px; }
.confirmation-dialog p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: pre-line; }
.confirmation-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confirmation-actions button { min-height: 42px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-soft); color: var(--text); font-weight: 800; }
.confirmation-actions .primary { border-color: var(--accent); background: var(--accent); color: white; }
.confirmation-actions .primary.danger { border-color: var(--error); background: var(--error); }
.display-type-choices { display: grid; gap: 8px; max-height: min(45dvh, 360px); overflow-y: auto; overscroll-behavior: contain; }
.display-type-choices button { width: 100%; padding: 12px; border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 11px; background: var(--panel-soft); color: var(--accent-dark); text-align: left; font-weight: 850; }
.display-type-cancel { justify-self: end; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--muted); font-size: 11px; font-weight: 800; }
@media (max-width: 520px) {
  .group-card { gap: 10px; padding: 14px; border-radius: 19px; contain-intrinsic-size: auto 166px; }
  .group-card-title { font-size: 17px; }
  .group-card-title-group { gap: 3px; }
  .group-door-icon { width: 19px; height: 19px; }
  .group-card-status { gap: 6px; font-size: 13.5px; }
  .group-card-status-dot { width: 14px; height: 14px; border-width: 4px; }
  .group-card-body { min-height: 84px; }
  .group-card-has-history .group-card-body { min-height: 84px; gap: 10px; }
  .group-card-metadata { gap: 5px; }
  .group-card-metadata p { font-size: 12.5px; }
  .group-card-metadata p:nth-last-child(-n+2) { padding-right: 142px; }
  .group-card-has-history .group-card-metadata p { padding-right: 0; }
  .group-card-action-panel { width: 124px; gap: 5px; }
  .group-card-has-history .group-card-action-panel { width: 100%; gap: 5px; }
  .group-card-has-history .group-primary-action { width: 100%; max-width: 100%; }
  .group-primary-action { min-height: 38px; gap: 5px; padding: 7px 10px; font-size: 12.5px; }
  .group-camera-icon { width: 18px; height: 18px; }
  .group-history-button { min-height: 38px; gap: 4px; padding: 6px 8px; }
  .group-history-icon { width: 16px; height: 16px; }
  .group-history-label { font-size: 9.5px; }
  .group-history-chevron { font-size: 20px; }
}
@media (max-width: 360px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .page > header { margin-right: -12px; margin-left: -12px; padding-right: 12px; padding-left: 12px; }
  .viewfinder-stage { width: calc(100% + 24px); margin-inline: -12px; }
  .screen-logo { width: 36px; height: 36px; }
  .camera-resolution { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

#groupsPage { padding: 0 16px calc(32px + var(--bottom-controls-inset)); color: #202020; }
#groupsPage > header { display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 12px; min-height: 74px; margin: 0 -16px; padding: calc(16px + env(safe-area-inset-top)) 16px 16px; border-bottom: 1px solid #e8e8e8; background: white; }
.visit-back-button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #111; }
.visit-back-button img, .capture-close img, .dialog-close img, .capture-exit img { display: block; width: 40px; height: 40px; }
.visit-back-button:disabled { opacity: .4; }
#groupsPage .visit-heading { display: grid; justify-items: center; gap: 3px; text-align: center; }
#groupsPage .visit-heading h1 { font-size: 19px; font-weight: 650; letter-spacing: 0; }
.visit-heading p { margin: 0; color: #666; font-size: 13px; line-height: 1.4; }
.visit-heading p[hidden] { display: none; }
#groupsPage > header > .header-version { display: none; }
.debug-enabled #groupsPage > header > .header-version { display: block; grid-column: 1 / -1; justify-self: end; color: #666; }
.visit-progress { margin: 0 -16px 16px; padding: 12px 16px; border-bottom: 1px solid #e5e5e5; background: white; }
.visit-progress-labels { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; }
#groupsPage .album-count { color: #202020; font-size: 13px; font-weight: 600; }
.visit-deadline { padding: 3px 9px; border-radius: 999px; background: #AC0011; color: white; font-size: 12px; white-space: nowrap; }
.visit-deadline.is-complete { padding: 0; border-radius: 0; background: transparent; color: #191d20; font-size: 13px; }
.visit-deadline[hidden] { display: none; }
.visit-progress progress { --validation-color: var(--accent); --validation-track: #ffd4da; display: block; width: 100%; height: 4px; overflow: hidden; border: 0; border-radius: 99px; background: var(--validation-track); accent-color: var(--validation-color); }
.visit-progress progress.is-complete { --validation-color: #15941d; --validation-track: #15941d; }
.visit-progress progress::-webkit-progress-bar { border-radius: 99px; background: var(--validation-track); }
.visit-progress progress::-webkit-progress-value { border-radius: 99px; background: var(--validation-color); }
.visit-progress progress::-moz-progress-bar { border-radius: 99px; background: var(--validation-color); }
#groupsPage .group-list { gap: 10px; }
#groupsPage .group-card { gap: 22px; min-height: 174px; padding: 16px; border: 0; border-radius: 10px; box-shadow: none; contain-intrinsic-size: auto 190px; color: #202020; }
#groupsPage .group-card-body { min-height: 80px; padding-left: 31%; }
.group-card-illustration { position: absolute; inset: 0 auto 0 0; width: calc(31% - 12px); display: flex; align-items: center; justify-content: center; border-radius: 8px; background: #f7f7f7; }
.group-card-illustration img { display: block; width: 82%; height: 80%; object-fit: contain; }
#groupsPage .group-card-header { align-items: start; gap: 4px; }
#groupsPage .group-card-title-group { display: grid; gap: 4px; }
#groupsPage .group-card-title { color: #111; font-size: 13.5px; font-weight: 650; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
#groupsPage .group-card-metadata { gap: 3px; }
#groupsPage .group-card-metadata p { padding: 0; color: #666; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.group-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#groupsPage .group-card { --group-state: #bb001c; --group-state-halo: #f9eaed; }
#groupsPage .group-card-validated { --group-state: #15941d; --group-state-halo: #edf7ec; }
#groupsPage .group-card-reviewing { --group-state: #bb001c; --group-state-halo: #f9eaed; }
#groupsPage .group-card-status { flex: 1 1 auto; gap: 8px; min-width: 0; font-size: 13px; white-space: normal; line-height: 1.4; }
.group-card-status-icon { flex: 0 0 auto; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; }
.group-card-status-icon img { display: block; width: 32px; height: 32px; }
.group-card-status-copy { display: grid; gap: 1px; }
.group-card-status { position: relative; }
button.group-card-status-icon { border: 0; border-radius: 50%; background: transparent; cursor: help; touch-action: manipulation; }
button.group-card-status-icon:focus-visible { outline: 2px solid var(--group-state); outline-offset: 3px; }
.group-card-error-tooltip { position: absolute; z-index: 4; bottom: calc(100% + 8px); left: 0; width: max-content; max-width: min(260px, calc(100vw - 72px)); padding: 8px 10px; border-radius: 8px; background: #272727; color: white; box-shadow: 0 3px 12px rgba(0,0,0,.18); font-size: 12px; font-weight: 400; line-height: 1.4; white-space: normal; pointer-events: none; }
.group-card-error-tooltip[hidden] { display: none; }
.group-card-remaining { font-weight: 400; font-size: 12px; }
#groupsPage .group-card-action-panel { position: static; flex: 0 0 auto; width: auto; }
#groupsPage .group-primary-action { min-height: 32px; min-width: 82px; padding: 7px 15px; background: var(--accent); color: white; font-size: 13px; font-weight: 650; box-shadow: none; }
#groupsPage .group-primary-action[hidden] { display: none; }
#groupsPage .group-primary-action:disabled, #groupsPage .group-primary-action.is-passive { background: #d1d1d3; }
#groupsPage .group-overflow-toggle { width: 18px; height: 24px; font-size: 20px; }
#groupsPage .group-card-report { padding: 10px 0 0; border-top: 1px solid #eee; pointer-events: auto; }
.group-card-report summary { color: #666; font-size: 12px; cursor: pointer; }
.group-card-report[open] .group-card-report-list { margin-top: 10px; }
@media (min-width: 600px) {
  #groupsPage { max-width: 720px; margin-inline: auto; padding-inline: 26px; }
  #groupsPage > header, .visit-progress { margin-inline: -26px; padding-inline: 26px; }
  #groupsPage .group-card { min-height: 250px; padding: 24px; gap: 32px; border-radius: 14px; }
  #groupsPage .group-card-body { min-height: 124px; }
  #groupsPage .group-card-title, #groupsPage .group-card-status { font-size: 20px; }
  #groupsPage .group-card-metadata p { font-size: 19px; }
  #groupsPage .group-primary-action { min-height: 48px; min-width: 125px; font-size: 19px; }
  .group-card-status-icon { width: 48px; height: 48px; }
  .group-card-remaining { font-size: 18px; }
}

/* Door-by-door cooler capture. The legacy shelf/grid camera is unchanged. */
.door-intro-page[hidden], .door-review-page[hidden], .cooler-camera-bar[hidden],
.cooler-camera-controls[hidden], .cooler-part-hint[hidden], .cooler-mode-choices button[hidden],
.door-diagram[hidden], .upload-success-notice[hidden], .cooler-report-photos[hidden] { display: none !important; }
.capture-close { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.capture-close:disabled { opacity: .4; }
.capture-bottom-primary { flex: 0 0 auto; width: 100%; min-height: 48px; padding: 12px 20px; border: 0; border-radius: 999px; background: var(--accent); color: white; font: inherit; font-size: 16px; font-weight: 650; cursor: pointer; }
.capture-bottom-primary:disabled { opacity: .45; cursor: default; }
.door-intro-page.active { height: 100%; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 20px; padding: max(20px, env(safe-area-inset-top)) 16px calc(24px + var(--bottom-controls-inset)); background: #141414; color: white; }
.door-intro-content { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 26px; padding: 20px 16px; text-align: center; }
.door-intro-content h1 { max-width: 420px; margin: 15px 0 0; color: white; font-size: clamp(18px,4.7vw,22px); line-height: 1.4; font-weight: 550; white-space: pre-line; }
.door-intro-content p { max-width: 430px; margin: 0; color: #c5c5c5; font-size: clamp(15px,4vw,18px); line-height: 1.5; }
.door-diagram { --diagram-ratio: .68; position: relative; width: min(70vw, calc(180px * var(--diagram-ratio))); aspect-ratio: var(--diagram-ratio); }
.door-diagram img { display: block; width: 100%; height: 100%; }
.door-diagram-base { opacity: .3; }
.door-diagram-active { position: absolute; inset: 0; }
.door-diagram-outline { position: absolute; border: 1px solid #ddd; border-radius: 14px; pointer-events: none; }
#cameraPage.cooler-capture.active { --camera-feedback-gap: 8px; --camera-controls-gap: 20px; --camera-controls-top: 16px; --camera-bottom-gap: 18px; --camera-hint-height: 24px; --camera-hint-font: 16px; --camera-shutter-size: 76px; --camera-controls-height: 144px; position: relative; padding: 0 0 calc(var(--camera-bottom-gap) + var(--bottom-controls-inset)); overflow: hidden; overscroll-behavior: none; background: #141414; color: white; grid-template-rows: minmax(var(--camera-preview-height, 0px),1fr) auto auto; }
/* Short viewports shrink chrome, not camera width. Feedback floats over the
   lower camera edge only when necessary. No page or message scrolling. */
#cameraPage.cooler-capture.camera-feedback-overlay { grid-template-rows: minmax(var(--camera-preview-height, 0px),1fr) auto; }
#cameraPage.cooler-capture.camera-controls-overlay { grid-template-rows: minmax(0,1fr); }
#cameraPage.cooler-capture .viewfinder-stage { width: 100%; margin: 0; align-items: start; background: #141414; }
#cameraPage.cooler-capture .viewfinder { border-radius: 0 0 24px 24px; background: #141414; }
#cameraPage.cooler-capture .camera-actions, #cameraPage.cooler-capture #miniCaptureGrid,
#cameraPage.cooler-capture #finishCaptureButton, #cameraPage.cooler-capture #exitCaptureButton,
#cameraPage.cooler-capture #directionChoices { display: none !important; }
.camera-feedback { display: contents; }
#cameraPage.cooler-capture .camera-feedback { display: grid; grid-template-rows: 20px var(--camera-hint-height); gap: var(--camera-feedback-gap); min-height: 0; }
#cameraPage.cooler-capture.camera-feedback-overlay .camera-feedback { position: absolute; z-index: 7; bottom: calc(var(--camera-controls-height) + var(--camera-bottom-gap) + var(--bottom-controls-inset)); inset-inline: 12px; margin-bottom: 6px; padding: 8px 4px; border-radius: 12px; background: rgba(0,0,0,.6); pointer-events: none; }
#cameraPage.cooler-capture .status { height: 20px; min-height: 0; max-height: 20px; color: #c5c5c5; padding-inline: 12px; margin: 0; font-size: 10px; line-height: 1; overflow: hidden; overflow-wrap: anywhere; }
#cameraPage.cooler-capture .status.error { color: #ff9c9c; }
.cooler-camera-bar { position: absolute; z-index: 8; top: max(16px, env(safe-area-inset-top)); inset-inline: 16px; display: flex; justify-content: center; align-items: center; min-height: 40px; pointer-events: none; }
.cooler-camera-bar .capture-close { position: absolute; left: 0; pointer-events: auto; }
.cooler-camera-label { max-width: calc(100% - 100px); padding: 9px 15px; font-size: 14px; line-height: 1.4; text-align: center; }
.cooler-camera-controls { display: grid; grid-template-rows: var(--camera-shutter-size) 32px; justify-items: center; gap: var(--camera-controls-gap); padding: var(--camera-controls-top) 16px 0; }
#cameraPage.cooler-capture.camera-controls-overlay .cooler-camera-controls { position: absolute; z-index: 6; inset-inline: 0; bottom: calc(var(--camera-bottom-gap) + var(--bottom-controls-inset)); background: linear-gradient(transparent,rgba(0,0,0,.75)); }
.cooler-part-hint-slot { display: none; width: 100%; min-height: 0; padding-inline: 16px; overflow: hidden; overflow-wrap: anywhere; }
#cameraPage.cooler-capture .cooler-part-hint-slot { display: block; }
.cooler-part-hint { margin: 0; color: white; font-size: var(--camera-hint-font,16px); line-height: 1.2; text-align: center; }
#coolerShutterMount { display: grid; place-items: center; }
.cooler-camera-controls .shutter { width: var(--camera-shutter-size); height: var(--camera-shutter-size); padding: 0; border: 0; border-radius: 50%; background: transparent url('/icons/shutter.svg') center/contain no-repeat; box-shadow: none; backdrop-filter: none; }
.cooler-camera-controls .shutter span { display: none; }
.cooler-camera-controls .shutter:disabled { opacity: .4; }
.cooler-mode-choices { width: 100%; display: grid; grid-template-columns: minmax(0,1fr) max-content minmax(0,1fr); align-items: center; gap: 8px; }
.cooler-mode-choices button { grid-row: 1; min-height: 32px; min-width: 0; padding: 6px 0; border: 1px solid transparent; border-radius: 999px; background: none; color: #888; font: inherit; font-size: clamp(10px,2.8vw,12px); font-weight: 650; white-space: nowrap; }
.cooler-mode-choices button:first-child { grid-column: 1; justify-self: end; }
.cooler-mode-choices button:last-child { grid-column: 3; justify-self: start; }
.cooler-mode-choices button.selected { grid-column: 2; justify-self: center; min-width: 126px; padding-inline: 14px; font-size: 12px; color: white; }
.cooler-mode-choices button:disabled { cursor: default; }
.door-review-page.active { display: flex; flex-direction: column; gap: 18px; min-height: 100%; padding: max(20px,env(safe-area-inset-top)) 16px calc(24px + var(--bottom-controls-inset)); color: #202020; }
.door-review-page .capture-close { background: transparent; }
.door-review-page h1 { margin: 0; font-size: 21px; text-align: center; }
.door-review-description { margin: 0; color: #202020; font-size: 15px; line-height: 1.5; text-align: center; }
.door-review-doors { min-width: 0; flex-shrink: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(40%,240px); gap: 12px; margin: 24px -16px; padding: 0 24px 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 24px; }
.door-review-doors.single-door { grid-template-columns: minmax(0,210px); grid-auto-columns: auto; justify-content: center; overflow: visible; }
.door-review-doors.two-doors { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-columns: auto; overflow: visible; }
.door-review-doors:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.door-review-card { min-width: 0; display: grid; justify-items: center; align-content: start; gap: 12px; scroll-snap-align: start; }
.door-review-card h3 { margin: 0; font-size: 14px; font-weight: 550; text-align: center; }
.door-review-images { width: 100%; aspect-ratio: 9/16; display: grid; grid-template-rows: minmax(0,1fr); overflow: hidden; border-radius: 16px; background: #e8e8e8; }
.door-review-images.split { grid-template-rows: repeat(2,minmax(0,1fr)); gap: 3px; }
.door-review-images img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.door-review-card button { padding: 9px 17px; border: 0; border-radius: 999px; background: #e8e8e8; color: #202020; font: inherit; font-size: 13px; font-weight: 650; }
.door-review-card button[hidden], .door-review-page .capture-bottom-primary[hidden] { display: none; }
.door-review-page .capture-bottom-primary { position: sticky; bottom: var(--bottom-action-gap); margin-top: auto; }
#groupsPage .group-card-uploading, #groupsPage .group-card-reviewing { --group-state: #ff7900; --group-state-halo: #fff3e9; }
.group-card-rejection-notice { padding: 12px; border-radius: 8px; background: #fbe9ed; color: #cc102b; font-size: 13px; line-height: 1.45; }
.group-card-rejection-notice p { margin: 0 0 6px; }
.group-card-rejection-notice button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 750; }
.cooler-report-page { padding-bottom: calc(24px + var(--bottom-controls-inset)); color: #202020; }
.cooler-report-page > header { display: grid; grid-template-columns: 40px 1fr 40px; background: white; border-bottom: 1px solid #eee; }
.cooler-report-page > header h1 { margin: 0; font-size: 17px; text-align: center; }
.cooler-report-photos { display: grid; grid-template-columns: repeat(var(--report-photo-columns,1),minmax(0,1fr)); align-items: start; gap: 3px; width: min(100%,620px); margin: 24px auto; }
.cooler-report-photos.single-column { width: min(100%,280px); }
.cooler-report-photo-column { display: grid; align-content: start; gap: 3px; min-width: 0; }
.cooler-report-photo-tile { display: grid; align-items: center; min-width: 0; margin: 0; overflow: hidden; border-radius: 4px; background: #e8e8e8; }
.cooler-report-photo-tile.is-loading, .cooler-report-photo-tile.is-unavailable { aspect-ratio: 3/4; }
.cooler-report-photo-tile img { display: block; width: 100%; height: auto; min-width: 0; object-fit: contain; }
.cooler-report-photo-tile figcaption { padding: 12px 6px; color: #65727b; font-size: 12px; line-height: 1.4; text-align: center; }
.cooler-report-photo-tile [hidden] { display: none; }
.cooler-report-page h2 { margin: 28px 0 14px; font-size: 22px; text-align: center; }
.cooler-report-page > p { margin: 0 0 28px; font-size: 15px; line-height: 1.5; text-align: center; }
.cooler-report-rules { padding: 18px 16px; margin-bottom: 28px; border-radius: 18px; background: white; }
.cooler-report-rules h3 { margin: 0 0 12px; font-size: 15px; }
.cooler-report-check { padding: 16px 0; border-bottom: 1px solid #eee; }
.cooler-report-check:last-child { border-bottom: 0; }
.cooler-report-check summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; list-style: none; color: #cf1029; font-size: 14px; font-weight: 650; line-height: 1.4; cursor: pointer; }
.cooler-report-check[data-state="passed"] summary { color: #16733d; }
.cooler-report-check[data-state="unknown"] summary { color: #65727b; }
.cooler-report-check-status { flex: 0 0 22px; width: 22px; height: 22px; display: grid; place-items: center; }
.cooler-report-check-label { flex: 1; min-width: 0; }
.cooler-report-check summary::-webkit-details-marker { display: none; }
.cooler-report-check summary::after { content: '+'; flex: 0 0 28px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #f4f4f4; color: #222; font-size: 22px; font-weight: 400; }
.cooler-report-check[open] summary::after { content: '−'; }
.cooler-report-check p { margin: 16px 0 0; color: #202020; font-size: 14px; line-height: 1.5; }
.cooler-report-page .capture-bottom-primary { position: static; }
.cooler-report-page .capture-bottom-primary.is-passive { background: #d1d1d3; color: #202020; }
.upload-success-notice { position: fixed; z-index: 95; top: max(18px,env(safe-area-inset-top)); left: 16px; right: 16px; max-width: 680px; margin-inline: auto; padding: 16px 18px; border-radius: 14px; background: #272727; color: white; box-shadow: 0 10px 26px rgba(0,0,0,.15); font-size: 14px; line-height: 1.45; }
.upload-success-notice.is-success { padding-left: 46px; }
.upload-success-notice.is-success::before { content: '✓'; position: absolute; left: 17px; top: 17px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: white; color: #272727; font-weight: 750; }
.dialog-close { display: grid; place-items: center; padding: 0; background: transparent; }
.capture-exit { border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
/* Shared dark-screen glass skin. SVGs supply glyphs only; no baked-in tint.
   Approximate Figma Glass, not its refraction/dispersion. Unsupported browsers
   retain the 10% white fill and edge highlights without background blur. */
.glass-surface, .cooler-mode-choices button.glass-surface {
  --glass-fill: rgba(255,255,255,.10);
  --glass-blur: 12px;
  --glass-saturation: 115%;
  background: var(--glass-fill);
  border: 0;
  border-radius: 9999px;
  color: white;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.40), inset 0 -1px 1px rgba(255,255,255,.15), 0 2px 8px rgba(0,0,0,.08);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));
}
#confirmationDialog.capture-exit-sheet { position: fixed; inset: auto 0 0; width: min(100%, 480px); max-width: 100%; height: auto; max-height: 90dvh; margin: 0 auto; padding: 0; border: 0; border-radius: 24px 24px 0 0; background: white; color: #191d20; overflow-y: auto; animation: capture-sheet-in .18s ease-out; }
#confirmationDialog.capture-warning-modal { position: fixed; inset: 0; width: min(calc(100% - 40px), 420px); max-width: 420px; height: fit-content; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 24px; background: #fafafa; color: #191d20; overflow-y: auto; }
#confirmationDialog.capture-warning-modal::backdrop { background: rgba(0,0,0,.6); }
#confirmationDialog.capture-warning-modal form { gap: 16px; padding: 24px 20px 20px; }
#confirmationDialog.capture-warning-modal h2 { color: #191d20; font-size: 22px; font-weight: 750; line-height: 1.3; }
#confirmationDialog.capture-warning-modal p { color: #191d20; font-size: 16px; line-height: 1.5; }
#confirmationDialog.capture-warning-modal .confirmation-actions { grid-template-columns: 1fr; margin-top: 16px; }
#confirmationDialog.capture-warning-modal .confirmation-actions button { width: 100%; min-height: 48px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 650; }
#confirmationDialog.capture-warning-modal #confirmationCancel { grid-row: 2; background: #ededee; color: #191d20; }
#confirmationDialog.capture-warning-modal #confirmationAccept { grid-row: 1; background: #191d20; color: white; }
#confirmationDialog.capture-warning-modal .confirmation-actions button:focus-visible { outline: 2px solid #191d20; outline-offset: 3px; }
#confirmationDialogIcon[hidden] { display: none; }
#confirmationDialog.retake-limit-modal form { padding: 32px 22px 20px; text-align: center; }
#confirmationDialog.retake-limit-modal #confirmationDialogIcon { width: 86px; height: 86px; justify-self: center; margin-bottom: 4px; }
#confirmationDialog.retake-limit-modal h2 { font-size: 20px; }
#confirmationDialog.retake-limit-modal .confirmation-actions { margin-top: 20px; }
#confirmationDialog.capture-exit-sheet::backdrop { background: rgba(0,0,0,.6); }
.confirmation-dialog.capture-exit-sheet form { display: grid; grid-template-rows: auto auto auto; gap: 0; padding: 0; }
.confirmation-dialog.capture-exit-sheet h2 { padding: 24px 20px 0; color: #191d20; font-size: 22px; line-height: 1.3; letter-spacing: 0; }
.confirmation-dialog.capture-exit-sheet p { padding: 18px 20px 32px; color: #191d20; font-size: 15px; line-height: 1.5; }
.capture-exit-sheet .confirmation-actions { grid-template-columns: 1fr; gap: 10px; padding: 16px 16px calc(24px + var(--bottom-controls-inset)); border-top: 1px solid #e5e5e5; }
.capture-exit-sheet .confirmation-actions button { min-height: 48px; border: 0; border-radius: 999px; font-size: 16px; font-weight: 650; }
.capture-exit-sheet #confirmationCancel { background: #191d20; color: white; }
.capture-exit-sheet .confirmation-actions #confirmationAccept { background: #ededee; color: #191d20; }
@keyframes capture-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { #confirmationDialog.capture-exit-sheet { animation: none; } }
@media (max-height: 680px) { .door-intro-content { gap: 18px; padding-block: 10px; } .door-diagram { width: min(60vw,calc(135px * var(--diagram-ratio))); } .door-intro-content h1 { margin-top: 5px; } }
@media (min-width: 600px) { .door-intro-content { gap: 32px; } .door-review-page.active, .cooler-report-page { max-width: 720px; margin-inline: auto; } }

/* Per-photo product analysis stays independent of capture and upload. */
.photo-cell-open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; border-radius: 0; }
.photo-cell-open:focus-visible { outline: 2px solid white; outline-offset: -3px; }
.photo-analysis-badge { position: absolute; z-index: 2; bottom: 3px; left: 3px; right: 3px; min-height: 28px; padding: 3px; border: 1px solid #ffffff66; border-radius: 5px; background: #18242be8; color: white; font-size: 10px; line-height: 1.2; pointer-events: auto; }
.photo-analysis-badge:disabled { opacity: .8; }
.photo-analysis-stage { position: relative; width: 100%; height: calc(100% - 82px); }
#photoDialog #dialogImage { width: 100%; height: 100%; object-fit: contain; }
.photo-analysis-action { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); min-height: 44px; max-width: calc(100% - 32px); padding: 10px 18px; border: 1px solid #ffffff88; border-radius: 22px; background: #18242bf2; color: white; font-weight: 700; }
.photo-analysis-action:disabled { opacity: .8; }
dialog#productAnalysisDialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 24px 16px; padding-top: max(24px, env(safe-area-inset-top)); padding-bottom: max(16px, env(safe-area-inset-bottom)); border: 0; border-radius: 0; overflow: hidden; background: #10171d; color: #eef4fa; }
.product-analysis-close { position: static; z-index: 3; justify-self: end; align-self: start; width: 44px; height: 44px; border: 1px solid #71818d; border-radius: 50%; background: #18242b; color: white; font-size: 28px; }
.product-analysis-content { max-width: 1000px; margin: 0 auto; }
.product-analysis-content h2 { padding-right: 50px; font-size: 22px; }
.product-analysis-times { display: grid; gap: 5px; padding: 16px; background: #202d37; border-radius: 12px; }
.product-analysis-times strong { font-size: 21px; }
.product-analysis-times small, .product-analysis-note { color: #b3c3d0; font-size: 13px; }
.product-analysis-scene { position: relative; width: fit-content; max-width: 100%; margin: 20px auto; }
.product-analysis-scene img { display: block; width: auto; max-width: 100%; height: auto; max-height: 65dvh; }
.product-analysis-scene>svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.product-analysis-scene rect { fill: none; stroke: #ffca70; stroke-width: 2; }
.product-analysis-scene rect.accepted { stroke: #6ce5ac; }
.product-analysis-scene text { fill: white; stroke: #10171d; paint-order: stroke; stroke-width: 3; font-size: 18px; font-weight: 800; }
.product-analysis-crops { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 12px; }
.product-analysis-crop { overflow: hidden; min-width: 0; border: 1px solid #806438; border-radius: 12px; background: #1b2832; }
.product-analysis-crop.accepted { border-color: #4b9f78; }
.product-analysis-picture { position: relative; height: 230px; background: #080e14; }
.product-analysis-picture svg { width: 100%; height: 100%; display: block; }
.product-analysis-number { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 4px; background: #10171ddd; font-size: 12px; }
.product-analysis-label { position: absolute; bottom: 0; left: 0; right: 0; padding: 25px 8px 8px; background: linear-gradient(transparent,#080e14 45%); }
.product-analysis-label strong, .product-analysis-label span { display: block; }
.product-analysis-label strong { color: #ffca70; font-size: 13px; line-height: 1.4; }
.accepted .product-analysis-label strong, .accepted .product-analysis-verdict { color: #6ce5ac; }
.product-ownership-own { --product-ownership-color: #6ce5ac; }
.product-ownership-competitor { --product-ownership-color: #ffb45e; }
.product-ownership-unknown { --product-ownership-color: #aab6c2; }
.product-analysis-scene rect[data-ownership] { stroke: var(--product-ownership-color); }
.product-analysis-crop[data-ownership] { border-color: var(--product-ownership-color); }
.product-analysis-crop[data-ownership] .product-analysis-label strong,
.product-analysis-ownership { color: var(--product-ownership-color); }
.product-analysis-ownership { margin: 10px 8px; font-size: 12px; font-weight: 650; }
.product-ownership-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 16px 0; font-size: 12px; }
.product-ownership-legend > span { display: inline-flex; align-items: center; gap: 6px; color: var(--product-ownership-color); }
.product-ownership-legend > span::before { content: ''; width: 10px; height: 10px; flex: none; border-radius: 50%; background: currentColor; }
.product-analysis-label span, .product-analysis-verdict { font-size: 12px; }
.product-analysis-verdict { padding: 0 8px; color: #ffca70; }
.product-analysis-crop details { padding: 0 8px 12px; font-size: 12px; }
.product-analysis-crop summary { cursor: pointer; }
.product-analysis-crop details p { overflow-wrap: anywhere; }
.product-analysis-label strong { overflow-wrap: anywhere; }
.product-analysis-crop-threshold, .product-analysis-detection-score { margin: 8px; color: #b3c3d0; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.product-analysis-layer-tabs { position: sticky; top: 0; z-index: 2; display: flex; gap: 8px; padding: 12px 0; margin-top: 12px; background: #10171d; }
.product-analysis-layer-tabs button { flex: 1; min-width: 0; min-height: 46px; padding: 10px 8px; border: 1px solid #627584; border-radius: 9px; background: #1b2832; color: #dce9f5; font: inherit; font-size: 13px; cursor: pointer; line-height: 1.4; }
.product-analysis-layer-tabs button[aria-pressed="true"] { border-color: #6ce5ac; background: #19332b; color: #6ce5ac; }
.product-analysis-layer-tabs button:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.product-analysis-scene-regions rect { stroke: #80c8ff; }
.product-analysis-scene-separators rect { stroke: #d6a8ff; }
.product-analysis-region-crop { border-color: #527b98; }
.product-analysis-region-crop .product-analysis-label strong { color: #a3d9ff; }
.product-analysis-region-crops-separators .product-analysis-crop { border-color: #84669e; }
.product-analysis-region-crops-separators .product-analysis-label strong { color: #d6a8ff; }
.product-analysis-models { margin: 16px 0; padding: 12px; border: 1px solid #546b7d; border-radius: 10px; }
.product-analysis-models>summary { cursor: pointer; line-height: 1.5; }
.product-analysis-model-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 13px; }
.product-analysis-model { min-width: 0; padding: 12px; background: #1b2832; border: 1px solid #3f5565; border-radius: 9px; }
.product-analysis-model-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.product-analysis-model-heading strong { font-size: 13px; }
.product-analysis-model-heading span { flex: none; border-radius: 5px; padding: 3px 6px; background: #263c48; color: #dce9f5; font-size: 11px; }
.product-analysis-model p { margin: 9px 0; font-size: 13px; }
.product-analysis-model small { display: block; font-size: 11px; line-height: 1.7; color: #b3c3d0; overflow-wrap: anywhere; }
.product-analysis-model-threshold { margin-top: 7px; }
@media(max-width:520px) { .product-analysis-model-grid { grid-template-columns: 1fr; } .product-analysis-layer-tabs { gap: 6px; } .product-analysis-layer-tabs button { font-size: 11px; } }
@media(max-width:380px) { .product-analysis-crops { grid-template-columns: repeat(2,minmax(0,1fr)); } }

.column-stitch-actions { position: absolute; z-index: 7; top: 14px; left: 14px; display: flex; flex-direction: column; gap: 6px; max-width: 47%; pointer-events: none; }
.column-stitch-actions button { min-height: 40px; padding: 7px 10px; border: 1px solid #ffffff66; border-radius: 9px; background: #18242be8; color: white; font-size: 12px; pointer-events: auto; }
.column-stitch-actions button[data-state="done"] { border-color: #6ce5ac; }
.photo-stitch-action { bottom: 76px; }
dialog#columnStitchDialog { position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 24px 16px; padding-top: max(24px,env(safe-area-inset-top)); padding-bottom: max(16px,env(safe-area-inset-bottom)); border: 0; border-radius: 0; overflow: hidden; background: #10171d; color: #eef4fa; }
.column-stitch-close { position: static; z-index: 3; justify-self: end; align-self: start; width: 44px; height: 44px; border: 1px solid #71818d; border-radius: 50%; background: #18242b; color: white; font-size: 28px; }
.column-stitch-content { max-width: 1000px; margin: 0 auto; }
dialog:is(#productAnalysisDialog,#columnStitchDialog)[open] { display: grid; grid-template-rows: 44px minmax(0,1fr); gap: 8px; }
.product-analysis-content, .column-stitch-content { width: 100%; height: 100%; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; padding-bottom: 24px; }
.column-stitch-content h2 { padding-right: 50px; font-size: 22px; }
.column-stitch-tabs { display: flex; gap: 8px; margin: 20px 0 12px; }
.column-stitch-tabs button { flex: 1; min-height: 48px; padding: 10px; border: 1px solid #71818d; border-radius: 9px; background: #1b2832; color: #dce9f5; font-size: 13px; }
.column-stitch-tabs button.active { border-color: #6ce5ac; color: #6ce5ac; background: #19332b; }
.column-stitch-count { font-size: 16px; font-weight: 700; }
.column-stitch-error { padding: 14px; border-radius: 10px; background: #42242c; color: #ffced5; }
.column-stitch-retry { min-height: 44px; padding: 8px 18px; border: 1px solid #71818d; border-radius: 8px; background: #1b2832; color: white; }
.column-stitch-progress { padding: 24px 0; color: #b3c3d0; }
.product-analysis-source { margin: 0; padding: 8px; font-size: 11px; color: #b3c3d0; }
.product-analysis-rerun { min-height: 44px; margin-top: 12px; padding: 10px 16px; border: 1px solid #71818d; border-radius: 9px; background: #202d37; color: white; font: inherit; cursor: pointer; }
.product-analysis-cpu-details p { overflow-wrap: anywhere; font-size: 12px; }
.product-rectification-comparison { margin: 16px 0; padding: 12px; border: 1px solid #546b7d; border-radius: 10px; }
.product-rectification-comparison summary { cursor: pointer; line-height: 1.5; }
.product-rectification-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: 10px; margin-top: 12px; }
.product-rectification-grid figure { min-width: 0; margin: 0; }
.product-rectification-grid img { display: block; width: 100%; height: auto; max-height: 55dvh; object-fit: contain; background: #080e14; border-radius: 6px; }
.product-rectification-grid figcaption { padding-top: 7px; color: #b3c3d0; font-size: 12px; text-align: center; }

.door-review-photo { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.door-review-photo .door-review-photo-open { display: block; width: 100%; height: 100%; padding: 0; border-radius: 0; background: transparent; }
.door-review-photo .photo-analysis-badge { padding: 5px; border-radius: 5px; background: #18242be8; color: white; font-size: 10px; }
.door-review-photo button:disabled { opacity: .7; }
.door-review-card .door-stitch-action { width: 100%; background: #18242b; color: white; }
#cameraPage.cooler-capture #columnStitchActions { display: none; }