.geometry-page{max-width:800px;margin:24px auto;padding:20px}.geometry-page img{max-width:100%;height:auto}.geometry-page .qr{width:260px;background:white}.geometry-page input[type=file]{display:block;margin:12px 0;max-width:100%}.geometry-page .preview{max-height:65vh;object-fit:contain}.geometry-page button{margin:8px 4px 8px 0}.geometry-page .photo-result{padding:18px;border:2px solid #88334b;border-radius:12px;margin:18px 0}.geometry-page li{margin:14px 0}.geometry-page .share-link{overflow-wrap:anywhere}.geometry-page label{display:block;margin-top:12px}.geometry-page textarea{width:100%;min-height:80px}.geometry-photo-link{display:block;margin:16px 0}
.geometry-page .photo-sources{border:0;padding:0;margin:20px 0}.geometry-page .photo-sources legend{font-weight:650;margin-bottom:4px}.geometry-page .photo-source{position:relative;display:flex;align-items:center;justify-content:center;min-height:54px;padding:12px 16px;box-sizing:border-box;border:2px solid #88334b;border-radius:12px;background:#88334b;color:#fff;font-weight:650;text-align:center;cursor:pointer}.geometry-page .photo-source-gallery{background:#fff;color:#88334b}.geometry-page .photo-source input[type=file]{position:absolute;inset:0;width:100%;height:100%;max-width:none;margin:0;opacity:0;cursor:pointer}.geometry-page .photo-source:focus-within{outline:3px solid #174586;outline-offset:3px}.geometry-page .photo-source:has(input:disabled){opacity:.5;cursor:default}
.photo-upload-success{padding:32px 20px;margin:24px auto;text-align:center;background:#edf9f1;border:2px solid #23804b;border-radius:20px;max-width:580px;outline:none}.photo-upload-success h2{font-size:28px;line-height:1.2;color:#166534;margin:18px 0}.photo-upload-success p{line-height:1.6}.photo-success-icon{width:104px;height:104px;margin:0 auto;color:#16803d}.photo-success-icon svg{display:block;width:100%;height:100%}.photo-received,.photo-complete{display:flex;align-items:center;gap:10px;color:#166534}.photo-received svg,.photo-complete svg{width:32px;height:32px;flex:none}.photo-processing{padding:18px;margin:16px 0;border:2px solid #398356;background:#f1faf4;border-radius:14px;animation:photo-arrived 1s ease-out 2}.photo-loading-line{display:flex;align-items:center;gap:14px;margin-top:18px}.photo-loading-line p{margin:7px 0 0;line-height:1.5;font-size:14px}.photo-spinner{display:inline-block;width:34px;height:34px;flex-shrink:0;box-sizing:border-box;border:4px solid #c9dad0;border-top-color:#206c45;border-radius:50%;animation:photo-spin .85s linear infinite;vertical-align:middle}.photo-spinner-small{width:20px;height:20px;border-width:3px;border-top-color:currentColor}.photo-complete{margin:18px 0;padding:12px 0}.photo-attachment{padding:16px;margin:16px 0 20px;border:1px solid #dfd4d8;background:#faf6f7;border-radius:14px}.photo-attachment h4{margin:0 0 8px}.photo-attachment .photo-processing{padding:12px}.photo-attachment .photo-loading-line{align-items:flex-start}.photo-attachment .photo-spinner{width:26px;height:26px}.photo-attachment .geometry-photo-link{margin:12px 0}.photo-attachment [data-photo-task-status]:empty{display:none}@keyframes photo-spin{to{transform:rotate(360deg)}}@keyframes photo-arrived{50%{box-shadow:0 0 0 5px #23804b25}}@media(prefers-reduced-motion:reduce){.photo-spinner,.photo-processing{animation:none}}
.exam-layout>.answer-card:has(.photo-attachment){min-width:0}
/* Keep photo submission and its status beside the task while reading the solution. */
@media(min-width:701px){
  .exam-layout>.answer-card:has(.photo-attachment){
    position:sticky;
    top:20px;
    align-self:start;
    max-height:calc(100vh - 40px);
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
    scrollbar-width:thin;
  }
}
.geometry-dialog{width:min(620px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:24px;overflow-y:auto}
.geometry-dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.geometry-dialog-header h2{font-size:24px;line-height:1.25;margin:0 0 12px}
.geometry-dialog-header button{flex-shrink:0}
.geometry-dialog-actions{display:grid;gap:12px;margin:20px 0}
.geometry-dialog [data-photo-create]{margin-top:16px}
.photo-pairing{text-align:center}
.photo-pairing .qr{display:block;width:240px;max-width:100%;height:auto;margin:16px auto;background:white}
.photo-pairing p{font-size:14px}
.photo-device-upload{border-top:1px solid var(--line);padding-top:16px;margin-top:20px}
.photo-device-upload summary,.photo-official-key summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:650}
.photo-device-upload label{display:block;margin:16px 0;font-weight:650}
.photo-device-upload input{display:block;max-width:100%;margin-top:12px}
.photo-device-upload .preview{display:block;max-width:100%;max-height:240px;object-fit:contain;margin:16px auto}
.photo-device-upload .preview[hidden]{display:none}
.photo-summary{padding:16px 0}
.photo-summary h3{font-size:19px;line-height:1.4}
.photo-summary p{margin:10px 0;font-size:14px}
.photo-summary .photo-score{font-size:20px;font-weight:650}
.photo-attachment .photo-summary{padding:0}
.photo-attachment .photo-score{font-size:18px}
.photo-attachment .photo-score-note{font-size:12px;margin:12px 0 0}
.photo-review{scroll-margin-top:calc(var(--task-pin-h,0px) + 16px);outline:none}
.photo-review>section+section{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}
.photo-review .photo-review-image{display:block;width:100%;max-width:260px;height:auto;margin:16px 0}
.photo-review .photo-result h2{font-size:20px}
.photo-review .photo-result ul{padding-left:22px}
.photo-review .photo-result li{margin:12px 0;line-height:1.6}
.photo-review .photo-result{overflow-wrap:anywhere}
.photo-review .photo-official-key img{max-width:100%;height:auto}
@media(max-width:700px){
  [data-photo-review-slot]{order:3;width:100%}
  .geometry-dialog{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);padding:18px}
  .geometry-dialog-header{gap:10px}
  .geometry-dialog-header h2{font-size:21px}
}