.photo-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #dafa7040; border-radius: 28px; background: #11261e; color: #f5f0de; box-shadow: 0 30px 120px #0009; overflow: auto; overscroll-behavior: contain; }
.photo-dialog::backdrop { background: #06100dd9; backdrop-filter: blur(10px); }
.photo-shell { padding: 28px; }
.photo-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.photo-header .eyebrow { color: #b9ce8f; font-size: 10px; letter-spacing: .15em; margin-bottom: 9px; }
.photo-header h2 { font-family: Club, sans-serif; font-weight: 500; font-size: clamp(28px, 5vw, 40px); line-height: 1.1; letter-spacing: -.055em; margin: 0; }
.photo-header h2 span { color: #def46b; }
#photoPlayer { font-size: 13px; color: #acbba3; margin: 10px 0 0; }
.photo-flow { display: flex; gap: 12px; align-items: center; justify-content: space-between; border-block: 1px solid #dafa7025; margin: 22px 0; padding: 13px 0; font-size: 10px; color: #718f77; }
.photo-flow span { display: flex; gap: 8px; align-items: center; }
.photo-flow b { color: #dae5c8; font-weight: 500; letter-spacing: .06em; }
.photo-flow i { font-style: normal; }
.photo-empty { background: radial-gradient(ellipse at 85% 20%, #7c943629, transparent 65%), #19392d; border: 1px solid #a2c48125; border-radius: 22px; padding: 30px; position: relative; overflow: hidden; }
.photo-empty > .ui-icon { position: absolute; top: 32px; right: 26px; width: 54px; height: 54px; color: #c8e98a; transform: rotate(-12deg); stroke-width: 1; }
.photo-empty h3 { font-family: Club, sans-serif; font-size: clamp(40px, 7vw, 56px); font-weight: 500; line-height: .95; letter-spacing: -.05em; margin: 0 60px 22px 0; }
.photo-empty p { max-width: 400px; color: #bfd0b5; line-height: 1.6; font-size: 14px; margin: 0 0 24px; }
.photo-privacy { font-size: 8px; letter-spacing: .12em; color: #c5db85; }
.photo-source-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.photo-dialog .button { min-height: 50px; border-radius: 13px; font-size: 14px; }
.photo-dialog .button-primary { background: #def46b; color: #183422; border-color: #def46b; }
.photo-dialog .button-secondary { background: #1a3328; color: #e5ecd9; border-color: #a9bd7940; }
.photo-dialog button:disabled, .photo-dialog select:disabled { opacity: .4; cursor: default; }
.photo-dialog button:focus-visible, .photo-dialog select:focus-visible, .photo-dialog input:focus-visible, .photo-dialog canvas:focus-visible { outline: 3px solid #def46b; outline-offset: 3px; }
.photo-dialog [hidden] { display: none !important; }
.photo-status-area { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0; }
#photoStatus { font-size: 13px; line-height: 1.5; color: #bccbac; margin: 0; }
#photoStatus.is-error { color: #ffc38d; }
.photo-progress { margin-top: 3px; width: 15px; height: 15px; flex-shrink: 0; border: 2px solid #def46b30; border-top-color: #def46b; border-radius: 50%; animation: photo-spin .8s linear infinite; }
@keyframes photo-spin { to { transform: rotate(360deg); } }
.photo-stage { border-radius: 18px; background: #071b13; overflow: hidden; position: relative; text-align: center; }
#photoCanvas { display: block; width: 100%; height: auto; cursor: crosshair; touch-action: none; }
.photo-image-caption { display: block; font-size: 9px; color: #c2d0b4; letter-spacing: .16em; padding: 10px; }
.photo-review { background: #f1f2e7; color: #263a2b; border-radius: 20px; padding: 22px; margin-top: 20px; }
.photo-visit-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 18px; }
.photo-visit-heading .eyebrow { color: #77895c; font-size: 8px; margin-bottom: 5px; }
.photo-visit-heading h3 { font-family: Club, sans-serif; font-weight: 500; font-size: 28px; letter-spacing: -.055em; margin: 0; }
.photo-total { display: flex; flex-direction: column; text-align: right; }
.photo-total strong { font-family: Club, sans-serif; font-size: 52px; font-weight: 500; line-height: .95; letter-spacing: -.065em; }
.photo-total span { color: #6c7e56; font-size: 10px; margin-top: 6px; }
.photo-count { border-block: 1px solid #c6cfb6; padding: 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 14px; font-size: 13px; }
.photo-count small { color: #788767; font-size: 11px; }
.photo-count > div { display: flex; gap: 6px; }
.photo-count button { min-width: 44px; height: 44px; border: 1px solid #bcc9a7; border-radius: 10px; background: #e4e9d8; font: inherit; color: #31482b; cursor: pointer; }
.photo-count button[aria-pressed=true] { background: #233e2a; color: #e3f578; }
.photo-placement-hint { font-size: 12px; line-height: 1.5; color: #6a7b58; margin: 14px 0; }
.photo-hits { display: grid; gap: 10px; }
.photo-hit-row { display: grid; grid-template-columns: 44px minmax(0,1fr); align-items: center; gap: 12px; }
.photo-hit-number { width: 44px; height: 44px; border-radius: 50%; background: #e1e7d4; border: 1px solid #bfcaaa; font: inherit; color: #73835f; cursor: pointer; }
.photo-hit-number[aria-pressed=true] { background: #233e2a; color: #e3f578; border-color: #233e2a; }
.photo-hit-field { display: grid; gap: 4px; }
.photo-hit-field label { color: #566a43; font-size: 11px; }
.photo-hit-field select { width: 100%; min-width: 0; height: 46px; border: 1px solid #c1ccaf; background: #fffef4; color: #2d452d; border-radius: 10px; font: inherit; font-size: 16px; padding: 0 12px; }
.photo-hit-field small { font-size: 10px; line-height: 1.4; color: #6f7f5e; }
.photo-confirm { display: flex; gap: 10px; align-items: center; margin: 18px 0; font-size: 12px; line-height: 1.5; cursor: pointer; }
.photo-confirm input { width: 23px; height: 23px; flex-shrink: 0; accent-color: #294d2d; }
#photoSubmit { width: 100%; background: #233e2a; color: #e1f36e; border-color: #233e2a; }
.photo-retry { display: block; margin: 14px auto 0; background: transparent; border: 0; color: #50683b; font: inherit; font-size: 12px; padding: 10px; text-decoration: underline; cursor: pointer; }
.photo-footer { color: #869d80; font-size: 10px; line-height: 1.6; margin-top: 20px; }
.photo-footer a { color: #bdd387; white-space: nowrap; }
@media (max-width: 600px) {
  .photo-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
  .photo-shell { padding: max(18px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); }
  .photo-header h2 { font-size: 29px; }
  .photo-flow { gap: 7px; font-size: 8px; margin: 18px 0; }
  .photo-flow span { gap: 5px; }
  .photo-empty { padding: 26px 22px; }
  .photo-empty > .ui-icon { width: 42px; height: 42px; }
  .photo-review { padding: 18px; }
}
@media (prefers-reduced-motion: reduce) { .photo-progress { animation: none; } }

.camera-score-button { min-height: 44px; font-size: 12px; padding-inline: 10px; }
.camera-score-button .ui-icon { width: 16px; height: 16px; }
.camera-score-button .beta-label { font-size: 7px; }