.photo-dialog { width: min(1080px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid #c9bcaa; border-radius: 20px; background: #f6f2ea; color: #302d29; box-shadow: 0 24px 100px #0007; }
.photo-dialog::backdrop { background: #101319b8; backdrop-filter: blur(5px); }
.photo-header { position: sticky; top: 0; z-index: 1; background: #f6f2ea; display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; border-bottom: 1px solid #d8cfc1; }
.photo-header small { color: #86704e; font-size: 12px; letter-spacing: .15em; }
.photo-header h2 { margin: 6px 0 0; font-size: 24px; }
.photo-close { width: 40px; height: 40px; border: 1px solid #d8cfc1; border-radius: 50%; background: transparent; color: inherit; font-size: 26px; cursor: pointer; }
.photo-body { display: grid; grid-template-columns: 1.1fr 1fr; }
.photo-preview { margin: 0; padding: 24px; background: #e9e1d4; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.photo-preview img { width: 100%; max-height: 540px; object-fit: contain; border-radius: 10px; }
.photo-preview canvas { width: 100%; height: auto; max-height: 540px; object-fit: contain; border-radius: 10px; }
.photo-resolution + .photo-resolution { margin-top: 16px; }
.photo-preview p { text-align: center; color: #756957; font-size: 13px; line-height: 1.6; }
.photo-settings { padding: 24px 28px; min-width: 0; }
.photo-intro { margin: 0 0 24px; font-size: 15px; line-height: 1.65; color: #625b51; }
.photo-options { border: 0; padding: 0; margin: 0 0 24px; }
.photo-options legend, .photo-resolution { font-size: 15px; font-weight: 600; }
.photo-choices { display: flex; gap: 7px; margin-top: 10px; }
.photo-choices label { flex: 1; position: relative; cursor: pointer; }
.photo-choices input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.photo-choices span { display: flex; gap: 6px; align-items: center; justify-content: center; min-height: 44px; padding: 6px; border: 1px solid #d5cbbb; border-radius: 8px; font-size: 14px; }
.photo-choices input:checked + span { border-color: #826539; background: #e9dcc5; box-shadow: inset 0 0 0 1px #826539; }
.photo-choices input:focus-visible + span { outline: 3px solid #946f37; outline-offset: 3px; }
.photo-choices input:disabled + span { opacity: .6; cursor: wait; }
.photo-choices i { width: 14px; height: 14px; border: 1px solid #0002; border-radius: 50%; flex-shrink: 0; }
.photo-options p, .photo-caution { font-size: 13px; line-height: 1.65; color: #776f62; }
.photo-resolution { display: grid; gap: 9px; }
.photo-resolution select { padding: 12px; border: 1px solid #cec2b0; border-radius: 8px; background: #fffcf7; color: #302d29; font: inherit; font-weight: 400; }
.photo-resolution small { font-weight: 400; font-size: 13px; color: #776f62; }
.photo-camera-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.photo-camera-fields label { display: grid; gap: 6px; font-size: 14px; }
.photo-camera-fields input { min-width: 0; width: 100%; padding: 10px; border: 1px solid #9b8a70; border-radius: 8px; background: #fffdf8; color: #302d29; color-scheme: light; }
.photo-camera-actions { display: flex; gap: 8px; margin-top: 10px; }
.photo-camera-actions button { flex: 1; min-height: 44px; border: 1px solid #9b8a70; border-radius: 8px; background: #e9dcc5; color: #302d29; cursor: pointer; }
.photo-camera-actions button:disabled { opacity: .5; cursor: default; }
.photo-submit { width: 100%; min-height: 48px; margin-top: 8px; border: 0; border-radius: 9px; background: #705936; color: #fffaf0; font: inherit; font-weight: 600; cursor: pointer; }
.photo-submit:disabled { opacity: .5; cursor: default; }
.photo-progress { display: grid; gap: 5px; margin-top: 16px; font-size: 14px; line-height: 1.6; }
#photoElapsed { font-size: 13px; color: #86775e; }
.photo-result-actions { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.photo-result-actions button, .photo-result-actions a { display: inline-flex; padding: 10px 14px; border-radius: 8px; border: 1px solid #b7a387; background: #ede5d6; color: #4f402a; text-decoration: none; font: inherit; font-size: 14px; cursor: pointer; }
.photo-dialog [hidden] { display: none !important; }
@media (max-width: 760px) { .photo-body { grid-template-columns: 1fr; } .photo-preview img { max-height: 240px; } .photo-header, .photo-settings { padding: 20px; } .photo-choices { flex-wrap: wrap; } }