.id-photo-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

.id-photo-card,
.id-photo-guide-card,
.id-photo-result {
  border: 1px solid var(--wl-color-border);
  border-radius: var(--wl-radius-panel);
  background: var(--wasabi-color-paper, #faf8f3);
  box-shadow: var(--wl-shadow-1);
}

.id-photo-card,
.id-photo-guide-card,
.id-photo-result { padding: clamp(22px, 4vw, 38px); }
.id-photo-side { display: grid; gap: var(--wl-space-4); }

.id-photo-dropzone {
  display: grid;
  min-height: 190px;
  place-items: center;
  border: 2px dashed var(--wl-color-border-strong);
  border-radius: var(--wl-radius-panel);
  background: var(--wl-color-primary-faint);
  padding: var(--wl-space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--wl-motion-fast), background-color var(--wl-motion-fast);
}

.id-photo-dropzone:hover,
.id-photo-dropzone[data-dragging="true"] { border-color: #8fa563; background: var(--wl-color-primary-soft); }
.id-photo-dropzone:focus-within { box-shadow: var(--wl-focus-ring); }
.id-photo-dropzone-copy { display: grid; gap: 7px; justify-items: center; }
.id-photo-dropzone-copy strong { color: #2b2b28; font-size: 1.15rem; }
.id-photo-dropzone-copy span,
.id-photo-dropzone-copy small { color: var(--wl-color-text-secondary); }
.id-photo-dropzone-icon { display: grid; width: 58px; height: 64px; place-items: center; border: 2px solid #8fa563; border-radius: 12px; background: #fff; color: #596b35; font-size: .82rem; font-weight: 850; }
.id-photo-dropzone input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }

.id-photo-file-summary,
.id-photo-status { margin: var(--wl-space-3) 0 0; border-radius: var(--wl-radius-md); background: var(--wl-color-surface-soft); padding: 12px 14px; color: var(--wl-color-text-secondary); overflow-wrap: anywhere; }
.id-photo-file-summary[data-state="ready"],
.id-photo-status[data-state="ready"] { background: var(--wl-color-success-soft); color: var(--wl-color-success); }
.id-photo-file-summary[data-state="error"],
.id-photo-status[data-state="error"] { background: var(--wl-color-error-soft); color: var(--wl-color-error); }
.id-photo-file-summary[data-state="checking"],
.id-photo-status[data-state="working"] { background: var(--wl-color-warning-soft); color: #2b2b28; }

.id-photo-preset { margin: var(--wl-space-6) 0 0; border: 0; padding: 0; }
.id-photo-preset legend { color: #2b2b28; font-weight: 800; }
.id-photo-preset-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.id-photo-preset-grid label { display: flex; min-height: 82px; gap: 12px; align-items: center; border: 1px solid var(--wl-color-border); border-radius: 12px; background: #fff; padding: 14px; cursor: pointer; }
.id-photo-preset-grid label:has(input:checked) { border-color: #8fa563; background: var(--wl-color-primary-faint); box-shadow: inset 0 0 0 1px #8fa563; }
.id-photo-preset-grid input { width: 20px; height: 20px; accent-color: #8fa563; }
.id-photo-preset-grid span { display: grid; gap: 3px; }
.id-photo-preset-grid small { color: var(--wl-color-text-secondary); }

.id-photo-editor { display: grid; grid-template-columns: minmax(210px, .8fr) minmax(190px, 1fr); gap: 22px; margin-top: 24px; align-items: center; }
.id-photo-canvas-wrap { position: relative; width: min(100%, 300px); aspect-ratio: 3 / 4; justify-self: center; overflow: hidden; border: 10px solid #fff; border-radius: 10px; background: #e8e6df; box-shadow: 0 12px 32px rgba(43, 43, 40, .16); cursor: grab; touch-action: none; user-select: none; }
.id-photo-canvas-wrap[data-dragging="true"] { cursor: grabbing; }
.id-photo-canvas-wrap canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.id-photo-canvas-wrap > p { position: absolute; right: 8px; bottom: 8px; margin: 0; border-radius: 999px; background: rgba(43, 43, 40, .78); padding: 5px 9px; color: #fff; font-size: .72rem; pointer-events: none; }
.id-photo-guide { position: absolute; inset: 0; pointer-events: none; }
.id-photo-guide-head { position: absolute; top: 10%; left: 16%; width: 68%; height: 74%; border: 1.5px dashed rgba(255,255,255,.95); border-radius: 48% 48% 44% 44%; box-shadow: 0 0 0 1px rgba(43,43,40,.24); }
.id-photo-guide-eye,
.id-photo-guide-center { position: absolute; left: 8%; right: 8%; border-top: 1px solid rgba(255,255,255,.82); box-shadow: 0 1px rgba(43,43,40,.22); }
.id-photo-guide-eye { top: 42%; }
.id-photo-guide-center { top: 50%; border-top-style: dashed; }
.id-photo-controls { display: grid; gap: 16px; }
.id-photo-controls > label:first-child { display: grid; gap: 8px; color: #2b2b28; font-weight: 750; }
.id-photo-controls input[type="range"] { width: 100%; accent-color: #8fa563; }
.id-photo-controls button { min-height: 46px; border: 1px solid var(--wl-color-border-strong); border-radius: 10px; background: #fff; color: #2b2b28; font-weight: 750; cursor: pointer; }
.id-photo-check { display: flex; gap: 10px; align-items: start; border: 1px solid var(--wl-color-border); border-radius: 12px; background: var(--wl-color-surface-soft); padding: 14px; cursor: pointer; }
.id-photo-check input { width: 20px; height: 20px; accent-color: #8fa563; }
.id-photo-check span { display: grid; gap: 4px; }
.id-photo-check small { color: var(--wl-color-text-secondary); line-height: 1.5; }

.id-photo-action,
.id-photo-download { box-sizing: border-box; display: flex; width: 100%; min-height: 54px; margin-top: 22px; align-items: center; justify-content: center; border: 1px solid #8fa563; border-radius: 12px; background: #8fa563; color: #fff; font-weight: 850; text-align: center; text-decoration: none; cursor: pointer; }
.id-photo-action:disabled { cursor: not-allowed; opacity: .56; }
.id-photo-download { background: #596b35; border-color: #596b35; }
.id-photo-download[hidden], .id-photo-result[hidden] { display: none; }
.id-photo-reset { width: 100%; min-height: 44px; margin-top: 5px; border: 0; background: transparent; color: #596b35; font-weight: 750; cursor: pointer; }

.id-photo-guide-card h2,
.id-photo-result h2 { color: #2b2b28; }
.id-photo-guide-card ol { display: grid; gap: 16px; margin: 20px 0; padding: 0; list-style: none; }
.id-photo-guide-card li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; }
.id-photo-guide-card li > span { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: #8fa563; color: #fff; font-weight: 850; }
.id-photo-guide-card li p { display: grid; gap: 3px; margin: 0; color: var(--wl-color-text-secondary); }
.id-photo-guide-card li strong { color: #2b2b28; }
.id-photo-privacy { border-top: 1px solid var(--wl-color-border); padding-top: 18px; }
.id-photo-privacy h3 { color: #2b2b28; font-size: 1rem; }
.id-photo-privacy p { color: var(--wl-color-text-secondary); line-height: 1.72; }
.id-photo-result img { display: block; width: min(100%, 240px); margin: 16px auto; border: 8px solid #fff; border-radius: 8px; box-shadow: 0 10px 28px rgba(43,43,40,.14); }
.id-photo-result p { color: var(--wl-color-text-secondary); }
#japanIdPhotoResultMeta { color: #2b2b28; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.id-photo-source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wl-space-4); }
.id-photo-source-grid a { color: #596b35; font-weight: 800; }

.id-photo-action:focus-visible,
.id-photo-download:focus-visible,
.id-photo-reset:focus-visible,
.id-photo-controls button:focus-visible,
.id-photo-preset-grid input:focus-visible,
.id-photo-source-grid a:focus-visible { outline: 2px solid transparent; box-shadow: var(--wl-focus-ring); }

@media (max-width: 900px) {
  .id-photo-shell { grid-template-columns: 1fr; }
  .id-photo-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .id-photo-editor,
  .id-photo-preset-grid,
  .id-photo-side,
  .id-photo-source-grid { grid-template-columns: 1fr; }
  .id-photo-card,
  .id-photo-guide-card,
  .id-photo-result { padding: 20px; }
  .id-photo-canvas-wrap { width: min(100%, 270px); }
}

@media (prefers-reduced-motion: reduce) {
  .id-photo-dropzone { transition: none; }
}