.photo-quality { margin-top:12px; padding:12px; border:1px solid #cbd5e1; border-radius:8px; background:#f8fafc; max-width:560px; width:100%; box-sizing:border-box; min-width:0; }
.photo-quality[hidden] { display:none; }
.photo-quality [hidden] { display:none !important; }
.photo-quality .pq-preview { position:relative; width:100%; max-width:260px; aspect-ratio:7/9; margin:10px auto; overflow:hidden; outline:1px solid #94a3b8; }
.photo-quality canvas { display:block; width:100%; box-sizing:border-box; height:auto; aspect-ratio:7/9; touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none; }
.photo-quality .pq-guide { position:absolute; inset:0; pointer-events:none; }
.photo-quality .pq-head { position:absolute; left:17%; right:17%; top:9%; height:66%; border:2px dashed #fff; border-radius:50%; box-shadow:0 0 0 1px #123e3877; }
.photo-quality .pq-eyes { position:absolute; left:24%; right:24%; top:42%; border-top:2px dashed #fff; filter:drop-shadow(0 1px 1px #123e38); }
.photo-quality[aria-busy=true] canvas { cursor:wait; }
.photo-quality canvas.is-dragging { cursor:grabbing; }
.photo-quality label { display:block; margin:10px 0 4px; }
.photo-quality input[type=range] { width:100%; min-height:44px; }
.photo-quality .pq-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.photo-quality .pq-actions button { width:100%; min-height:44px; padding:8px; font-size:14px; line-height:1.25; }
.photo-quality button { min-height:44px; padding:10px 16px; border:1px solid #64748b; border-radius:6px; background:#fff; color:#123e38; font:inherit; font-weight:700; cursor:pointer; }
.photo-quality button:disabled { opacity:.6; cursor:wait; }
.photo-quality .pq-use { color:white; background:#17665b; }
.photo-quality .pq-status { padding:10px; margin-top:10px; overflow-wrap:anywhere; font-size:14px; line-height:1.5; }
.photo-quality .pq-status[data-kind=error] { background:#fee2e2; color:#991b1b; }
.photo-quality .pq-status[data-kind=warning] { background:#fff3cd; color:#704900; }
.photo-quality .pq-status[data-kind=success] { background:#dcfce7; color:#166534; }
.photo-quality small { display:block; line-height:1.5; }
.photo-quality .pq-privacy { margin:8px 0; font-size:13px; line-height:1.5; }
.photo-quality .pq-adjust { position:absolute; width:36px; height:36px; min-height:36px; padding:0; display:grid; place-items:center; background:#fff; opacity:.75; border-color:#2a645c; color:#123e38; touch-action:none; user-select:none; }
.photo-quality .pq-adjust::after { content:""; position:absolute; inset:-4px; }
.photo-quality .pq-adjust img { width:18px; height:18px; pointer-events:none; }
.photo-quality .pq-adjust:focus-visible { outline:3px solid #1586b7; outline-offset:-3px; }
.photo-quality .pq-adjust:active { background:#d8eee7; }
.photo-quality .pq-adjust:disabled { cursor:default; opacity:.45; }
.photo-quality .pq-adjust-left { left:6px; top:50%; transform:translateY(-50%); }
.photo-quality .pq-adjust-right { right:6px; top:50%; transform:translateY(-50%); }
.photo-quality .pq-adjust-up { top:6px; left:50%; transform:translateX(-50%); }
.photo-quality .pq-adjust-down { bottom:6px; left:50%; transform:translateX(-50%); }
.photo-quality .pq-zoom-buttons { position:absolute; inset:0; pointer-events:none; }
.photo-quality .pq-zoom-buttons .pq-adjust { bottom:6px; pointer-events:auto; }
.photo-quality .pq-adjust-out { left:6px; }
.photo-quality .pq-adjust-in { right:6px; }
.photo-quality .pq-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.photo-quality .pq-help-open { display:grid; place-items:center; width:36px; height:36px; min-height:36px; padding:6px; border:0; background:transparent; }
.pq-help { width:min(480px,calc(100% - 24px)); max-height:calc(100dvh - 32px); box-sizing:border-box; margin:auto; padding:16px; border:1px solid #a9c4bf; border-radius:8px; color:#123e38; background:#fff; overflow:auto; }
.pq-help::backdrop { background:#0007; }
.pq-help header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.pq-help h2 { font:700 18px/1.3 system-ui; margin:0; }
.pq-help-close { flex:0 0 44px; width:44px; height:44px; padding:10px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; cursor:pointer; }
.pq-help-content { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.pq-help figure { margin:0; text-align:center; }
.pq-help-sample { display:block; width:140px; height:180px; aspect-ratio:7/9; object-fit:cover; margin:0 auto; }
.pq-help figcaption { font:12px/1.4 system-ui; margin-top:6px; }
.pq-help ul { padding-left:20px; margin:0; font:14px/1.5 system-ui; }
.pq-help li+li { margin-top:6px; }
.pq-help button:focus-visible,.pq-help-open:focus-visible { outline:3px solid #1586b7; outline-offset:2px; }
@media(min-width:520px) { .pq-help-content { grid-template-columns:140px minmax(0,1fr); } }