.id-photo-studio { --photo-mark: #087f73; --photo-guide: #ffd35a; }
.id-photo-preview-frame { position: relative; flex: none; }
.id-photo-preview-frame canvas { width: 100%; height: 100%; max-width: none; max-height: none; }
.id-photo-composition { display: grid; gap: 16px; min-width: 0; }
.id-photo-modes { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--studio-border); }
.id-photo-modes button { min-height: 42px; font: inherit; padding: 7px 4px; border: 0; border-radius: 0; background: #fff; color: #4d5c56; cursor: pointer; }
.id-photo-modes button + button { border-left: 1px solid var(--studio-border); }
.id-photo-modes button[aria-pressed="true"] { color: #fff; background: var(--photo-mark); }
.id-photo-mark-fields, .id-photo-crop-fields { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 16px; }
.id-photo-mark-fields legend { font: inherit; margin-bottom: 12px; color: #56665e; }
.id-photo-mark-fields .studio-pair { gap: 8px; }
.id-photo-mark-fields .studio-pair label { font-size: 12px; }
.id-photo-mark-error { font-size: 12px; color: #b32e30; overflow-wrap: anywhere; }
.id-photo-mark-error:empty { display: none; }
.id-photo-mark-actions, .id-photo-frame-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.id-photo-frame-actions .studio-button, .id-photo-mark-actions .studio-button { flex: 1; padding-inline: 8px; white-space: nowrap; }
.id-photo-mark-actions [data-apply-marks] { color: #fff; background: var(--photo-mark); border-color: var(--photo-mark); }
.id-photo-studio .id-photo-guide-toggle { display: flex; flex-wrap: nowrap; min-height: 32px; gap: 8px; }
.id-photo-guide-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--photo-mark); }
.id-photo-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.id-photo-markers, .id-photo-guides { position: absolute; inset: 0; pointer-events: none; }
.id-photo-mark-line { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / .6); }
.id-photo-mark-top, .id-photo-mark-chin { left: 0; right: 0; height: 1px; }
.id-photo-mark-top { top: var(--mark-top); }
.id-photo-mark-chin { top: var(--mark-chin); }
.id-photo-mark-center { top: 0; bottom: 0; left: var(--mark-center); width: 1px; }
.id-photo-studio .id-photo-marker { position: absolute; display: flex; align-items: center; justify-content: center; border: 1px solid #fff; border-radius: 0; background: var(--photo-mark); color: #fff; padding: 0 7px; font: inherit; font-size: 12px; width: 48px; height: 32px; pointer-events: auto; touch-action: none; user-select: none; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.id-photo-marker-top { top: clamp(16px, var(--mark-top), calc(100% - 16px)); left: 0; transform: translateY(-50%); cursor: ns-resize; }
.id-photo-marker-chin { top: clamp(16px, var(--mark-chin), calc(100% - 16px)); right: 0; transform: translateY(-50%); cursor: ns-resize; }
.id-photo-marker-center { bottom: 0; left: clamp(24px, var(--mark-center), calc(100% - 24px)); transform: translateX(-50%); cursor: ew-resize; }
.id-photo-grid-vertical, .id-photo-grid-horizontal, .id-photo-center-guide, .id-photo-face-guide { position: absolute; box-shadow: 0 0 0 1px rgb(0 0 0 / .18); background: rgb(255 255 255 / .8); }
.id-photo-grid-vertical { top: 0; bottom: 0; width: 1px; }
.id-photo-grid-horizontal { left: 0; right: 0; height: 1px; }
.id-photo-grid-vertical.id-photo-third { left: 33.3333%; }
.id-photo-grid-vertical.id-photo-two-thirds { left: 66.6667%; }
.id-photo-grid-horizontal.id-photo-third { top: 33.3333%; }
.id-photo-grid-horizontal.id-photo-two-thirds { top: 66.6667%; }
.id-photo-center-guide { top: 0; bottom: 0; left: 50%; width: 1px; background: var(--photo-guide); }
.id-photo-face-guide { top: 0; bottom: 0; left: var(--guide-center); border-left: 1px dashed #fff; width: 0; background: none; }
.id-photo-head-guide { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--photo-guide); color: #fff; font-size: 12px; line-height: 20px; text-shadow: 0 1px 2px #000, 0 -1px 2px #000; padding-inline: 5px; }
.id-photo-top-guide { top: var(--guide-top); }
.id-photo-chin-guide { top: var(--guide-chin); text-align: right; }
@media (max-width: 767.98px) { .id-photo-composition { grid-column: 1 / -1; } .id-photo-crop-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } .id-photo-mark-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; } .id-photo-mark-actions, .id-photo-mark-error { grid-column: 1 / -1; } }
@media (max-width: 479.98px) { .id-photo-crop-fields, .id-photo-mark-fields { grid-template-columns: minmax(0, 1fr); } }