.face-lock-content { padding: calc(76px + var(--safe-top) + 14px) 16px calc(24px + var(--safe-bottom)); height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.face-ref-grid, .outfit-item-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.face-ref-slot, .outfit-item-card { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px dashed var(--border); border-radius: 12px; background: var(--neutral-surface); cursor: pointer; }
.face-ref-slot.has-image, .outfit-item-card.has-image { border-style: solid; }
.face-ref-slot img, .outfit-item-card img { width: 100%; height: 100%; object-fit: cover; }
.face-ref-slot input, .outfit-item-card input { display: none; }
.face-ref-slot-label { position: absolute; inset: auto 0 0; padding: 4px 6px; color: #fff; font-size: 11px; text-align: center; background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent); }
.face-ref-slot-empty, .outfit-item-empty { display: grid; place-items: center; height: 100%; color: var(--text-tertiary); font-size: 24px; }
.face-ref-slot-remove, .outfit-item-remove { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; color: #fff; background: rgb(0 0 0 / 45%); font-size: 13px; line-height: 22px; text-align: center; }

.outfit-category-tabs { margin-top: 12px; display: flex; gap: 8px; overflow-x: auto; }
.outfit-category-tabs button { flex: 0 0 auto; height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--neutral-surface); font-size: 12px; white-space: nowrap; }
.outfit-category-tabs button.active { color: #fff; border-color: var(--accent); background: var(--accent); }

.outfit-item-card .outfit-item-name { position: absolute; inset: auto 0 0; padding: 4px 6px; color: #fff; font-size: 11px; text-align: center; background: linear-gradient(to top, rgb(0 0 0 / 55%), transparent); }

.upload-button { margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); background: var(--neutral-surface); font-size: 13px; font-weight: 700; cursor: pointer; }

.look-list { margin-top: 12px; display: grid; gap: 10px; }
.look-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--border), transparent 28%); border-radius: 12px; background: color-mix(in srgb, var(--neutral-surface-raised) 62%, transparent); }
.look-card strong { display: block; font-size: 15px; }
.look-card small { color: var(--text-secondary); font-size: 12px; }
.look-card-active { color: var(--accent-dark); font-size: 12px; font-weight: 700; }
.look-card button { height: 30px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--neutral-surface); font-size: 12px; }
.soft-button { width: 100%; margin-top: 10px; height: 42px; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-secondary); background: transparent; font-size: 13px; font-weight: 700; }

.face-lock-footer-note { margin: 18px 2px 0; color: var(--text-tertiary); font-size: 11.5px; line-height: 1.6; }

#look-dialog { width: min(90vw, 360px); padding: 18px; border: 0; border-radius: 16px; }
#look-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.look-dialog-form { display: grid; gap: 12px; }
.look-dialog-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; }
.look-dialog-form input { height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; }
.look-dialog-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 240px; overflow-y: auto; }
.look-dialog-items label { display: grid; gap: 4px; font-weight: 400; font-size: 11px; text-align: center; }
.look-dialog-items img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.look-dialog-actions { display: flex; gap: 8px; }
.look-dialog-actions button { flex: 1; height: 38px; border: 1px solid var(--border); border-radius: 8px; background: var(--neutral-surface); font-size: 13px; font-weight: 700; }
.look-dialog-actions #look-dialog-save { color: #fff; border-color: var(--accent); background: var(--accent); }
.look-dialog-actions .is-danger { color: #c93645; }