.photo-flow { --photo-ink: #1b353d; --photo-muted: #577077; --photo-line: #dbe6e5; --photo-accent: #087c70; color: var(--photo-ink); background: #f8faf8; border: 1px solid var(--photo-line); border-radius: 20px; overflow: hidden; width: 100%; box-sizing: border-box; }
.photo-flow *, .photo-flow *::before, .photo-flow *::after { box-sizing: border-box; }
.photo-flow h2, .photo-flow h3, .photo-flow p, .photo-flow figure { margin: 0; }
.photo-flow button, .photo-flow select, .photo-flow input { font: inherit; }
.photo-flow button { min-height: 42px; border: 1px solid var(--photo-line); background: #fff; color: var(--photo-ink); border-radius: 9px; padding: 9px 13px; cursor: pointer; font-weight: 600; }
.photo-flow button:hover:not(:disabled) { background: #edf5f1; border-color: #83afa5; }
.photo-flow button:disabled { cursor: not-allowed; opacity: .5; }
.photo-flow button:focus-visible, .photo-flow input:focus-visible, .photo-flow select:focus-visible, .photo-flow summary:focus-visible { outline: 3px solid #b7d66b; outline-offset: 3px; }
.photo-header { padding: 23px 26px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.photo-header h2 { font-size: clamp(20px, 2vw, 26px); line-height: 1.35; margin-top: 5px; }
.photo-step { color: var(--photo-accent); font-size: 11px; letter-spacing: .08em; font-weight: 700; }
.photo-close { white-space: nowrap; }
.photo-prototype-notice { display: flex; flex-wrap: wrap; gap: 4px 10px; padding: 11px 26px; background: #e9f1e9; color: #315747; line-height: 1.55; font-size: 13px; border-block: 1px solid #dce6d9; }
.photo-tabs { display: none; }
.photo-columns { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(330px, 1fr); align-items: start; }
.photo-source-panel { min-width: 0; padding: 22px; border-right: 1px solid var(--photo-line); }
.photo-source-tools { display: grid; grid-template-columns: .95fr 1.05fr; gap: 14px; margin-bottom: 17px; }
.photo-upload { display: grid; align-content: start; gap: 6px; padding: 13px; border: 1px dashed #abc2b6; border-radius: 10px; background: white; font-size: 13px; min-width: 0; }
.photo-upload span { color: var(--photo-muted); font-size: 11px; }
.photo-upload input { width: 100%; margin-top: 5px; font-size: 11px; color: var(--photo-muted); }
.photo-example-picker { display: grid; gap: 7px; }
.photo-example-picker label { display: grid; gap: 6px; font-size: 12px; color: var(--photo-muted); }
.photo-flow select { padding: 8px 9px; border: 1px solid #bdceca; border-radius: 7px; background: white; min-height: 40px; color: var(--photo-ink); max-width: 100%; }
.photo-flow .photo-load-button { font-size: 12px; color: var(--photo-accent); }
.photo-paper { border: 1px solid #ddd9c9; background: #fffdf7; border-radius: 10px; overflow: hidden; box-shadow: 0 7px 18px #243c2d09; }
.photo-example-image { display: block; width: 100%; height: auto; }
.photo-paper figcaption { color: #786f5c; font-size: 11px; padding: 8px 12px 11px; text-align: center; border-top: 1px solid #eee8d9; }
.photo-evidence-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 13px; }
.photo-evidence-buttons button { font-size: 12px; padding: 8px 3px; font-weight: 500; }
.photo-flow .photo-selected { background: #edf4db; border-color: #99b965; }
.photo-evidence-current { margin-top: 9px !important; font-size: 12px; color: #4c6944; }
.photo-upload-note { font-size: 12px; line-height: 1.6; color: #725221; padding: 10px 12px; margin-bottom: 12px !important; border-radius: 8px; background: #fff0d7; }
.photo-upload-preview { width: 100%; max-height: 550px; object-fit: contain; background: white; border-radius: 9px; border: 1px solid var(--photo-line); }
.photo-no-image { display: grid; justify-items: center; align-content: center; text-align: center; min-height: 345px; padding: 35px; background: #eef2ed; border: 1px dashed #c6d2c9; border-radius: 10px; }
.photo-empty-icon { font-size: 44px; color: #6f8b76; margin-bottom: 15px; }
.photo-no-image h3 { font-size: 18px; margin-bottom: 10px; }
.photo-no-image p, .photo-review-empty p { color: var(--photo-muted); font-size: 13px; line-height: 1.8; }
.photo-review-panel { padding: 23px; min-width: 0; }
.photo-review-heading h3 { font-size: 21px; line-height: 1.45; margin-top: 4px; }
.photo-variant-note { color: var(--photo-muted); font-size: 12px; line-height: 1.7; margin-top: 5px !important; }
.photo-model-outline { display: grid; gap: 5px; padding: 12px 13px; background: #eef4f2; border: 1px solid #deebe5; border-radius: 9px; margin: 16px 0; }
.photo-model-outline strong { font-size: 13px; }
.photo-model-outline span { color: var(--photo-muted); font-size: 11px; line-height: 1.65; }
.photo-essential-fields, .photo-extra-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.photo-field { display: grid; align-content: start; gap: 6px; background: #fff; border: 1px solid var(--photo-line); border-radius: 8px; padding: 10px; transition: background .15s; }
.photo-field-title { font-size: 12px; font-weight: 650; line-height: 1.4; }
.photo-input-unit { display: flex; gap: 7px; align-items: center; }
.photo-input-unit input { width: 100%; min-width: 0; padding: 9px 8px; border-radius: 6px; border: 1px solid #bdceca; color: var(--photo-ink); background: white; font-size: 15px; }
.photo-input-unit span { font-size: 12px; white-space: nowrap; color: var(--photo-muted); }
.photo-field small { color: var(--photo-muted); font-size: 10px; line-height: 1.5; }
.photo-direction { grid-column: 1 / -1; }
.photo-direction select { width: 100%; }
.photo-other-fields { margin-top: 14px; border-block: 1px solid var(--photo-line); padding: 11px 0; }
.photo-other-fields summary { cursor: pointer; font-size: 13px; font-weight: 600; min-height: 26px; padding-block: 4px; }
.photo-extra-grid { margin-top: 12px; }
.photo-other-fields p { font-size: 11px; color: var(--photo-muted); line-height: 1.7; margin-top: 11px; }
.photo-range { margin-top: 15px; }
.photo-range strong { font-size: 12px; }
.photo-range p { color: var(--photo-muted); font-size: 11px; line-height: 1.65; margin-top: 5px; }
.photo-ack { display: flex; gap: 10px; align-items: flex-start; font-size: 12px; line-height: 1.7; cursor: pointer; margin-top: 15px; }
.photo-ack input { accent-color: var(--photo-accent); flex-shrink: 0; width: 19px; height: 19px; margin: 1px 0 0; }
.photo-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid var(--photo-line); padding: 14px 23px; background: white; }
.photo-readiness { font-size: 12px; line-height: 1.6; color: var(--photo-muted); }
.photo-has-error { color: #936124; }
.photo-flow .photo-confirm { background: #126f60; border-color: #126f60; color: white; min-width: 185px; }
.photo-flow .photo-confirm:hover:not(:disabled) { color: #124c42; }
.photo-review-empty { display: grid; align-content: center; gap: 17px; min-height: 410px; padding: 25px; text-align: center; }
.photo-review-empty h3 { font-size: 19px; }
.photo-blocked { margin-top: 22px; padding: 20px; border: 1px solid #ecd1b3; border-radius: 10px; background: #fff5e8; color: #815727; }
.photo-blocked p { font-size: 13px; line-height: 1.8; margin-block: 13px; }
@media (max-width: 700px) {
  .photo-flow { border-radius: 12px; }
  .photo-header { padding: 15px 14px; gap: 8px; align-items: flex-start; }
  .photo-header h2 { font-size: 18px; }
  .photo-header .photo-close { font-size: 11px; padding: 7px; min-height: 38px; }
  .photo-step { font-size: 9px; }
  .photo-prototype-notice { padding: 10px 14px; font-size: 11px; }
  .photo-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; padding: 10px 14px; background: #f1f5f1; }
  .photo-tabs button { font-size: 12px; }
  .photo-tabs button[aria-selected="true"] { border-color: #84a997; background: #dfeedd; color: #235742; }
  .photo-columns { display: block; }
  .photo-flow[data-tab="source"] .photo-review-panel, .photo-flow[data-tab="review"] .photo-source-panel { display: none; }
  .photo-source-panel, .photo-review-panel { border: 0; padding: 14px; }
  .photo-source-tools { grid-template-columns: 1fr; gap: 11px; }
  .photo-upload { padding: 11px; }
  .photo-example-picker { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: end; }
  .photo-example-picker label { font-size: 10px; }
  .photo-flow .photo-load-button { font-size: 11px; min-height: 43px; padding: 8px; }
  .photo-review-heading h3 { font-size: 18px; }
  .photo-model-outline { margin: 11px 0; }
  .photo-essential-fields { gap: 8px; }
  .photo-field { padding: 9px; }
  .photo-input-unit input { font-size: 16px; }
  .photo-flow select { font-size: 16px; }
  .photo-example-picker select { font-size: 12px; }
  .photo-range p { font-size: 11px; }
  .photo-footer { display: grid; gap: 9px; padding: 11px 14px; position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -5px 12px #233e2908; }
  .photo-readiness { font-size: 11px; }
  .photo-confirm { width: 100%; }
  .photo-review-empty { min-height: 270px; padding: 15px; }
  .photo-no-image { min-height: 235px; padding: 24px; }
  .photo-extra-grid { gap: 8px; }
  .photo-blocked { margin-top: 15px; padding: 15px; }
}