/* Kwéyòl Look photo booth (look/templates/look/look.html) */
.kw-look { max-width: 640px; margin: 0 auto; }
.kw-look-hero { text-align: center; }
.kw-look-privacy { background: #E9F7EE; color: #256B40; border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 12px 0 0; }
.kw-look-booth { margin-top: 16px; text-align: center; }
.kw-look-start { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 10px 0; }
.kw-look-pick { cursor: pointer; }
.kw-look-hint { font-size: 13px; color: var(--muted, #6b7785); margin: 8px 0; width: 100%; }
.kw-look-camera video { width: 100%; max-width: 480px; border-radius: 16px; transform: scaleX(-1); background: #111; }
.kw-look-camera-actions { display: flex; gap: 16px; justify-content: center; align-items: center; margin-top: 10px; }
.kw-look-progress { height: 10px; background: #EEE7DA; border-radius: 999px; overflow: hidden; max-width: 320px; margin: 16px auto 8px; }
.kw-look-progress div { height: 100%; width: 0; background: var(--sea); transition: width .3s ease; }
.kw-look-stage-wrap { display: flex; justify-content: center; }
.kw-look-stage-wrap > div { border-radius: 16px; overflow: hidden; box-shadow: 0 4px 16px rgba(20,33,61,.18); touch-action: none; max-width: 100%; }
.kw-look-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 12px 0 4px; flex-wrap: wrap; }
.kw-look-toggle { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; cursor: pointer; }
.kw-look-toggle input { width: 18px; height: 18px; accent-color: var(--sea); }
.kw-look-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0; }
.kw-look-tab { flex: none; padding: 8px 12px; border-radius: 999px; border: 2px solid rgba(20,33,61,.12); background: white; font-weight: 700; font-size: 13px; color: var(--ink); cursor: pointer; }
.kw-look-tab[aria-selected="true"] { background: var(--sea); border-color: var(--sea); color: white; }
.kw-look-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.kw-look-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 4px; border: 2px solid rgba(20,33,61,.1); border-radius: 12px; background: #FFFBF2; cursor: pointer; font-size: 11px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.kw-look-item img { width: 64px; height: 64px; object-fit: contain; }
.kw-look-item.is-on { border-color: var(--sea); background: #E6F3F4; box-shadow: 0 0 0 2px rgba(11,110,124,.2); }
.kw-look-item:focus-visible, .kw-look-tab:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
.kw-look-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 16px; }
.kw-look-avatar { border-top: 1px solid rgba(20,33,61,.1); margin-top: 16px; padding-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kw-look-msg { font-weight: 700; margin: 0; min-height: 1.2em; }
.kw-look-gallery { margin-top: 16px; }
.kw-look-gallery h3 { font-size: 16px; margin: 16px 0 8px; }
.kw-look-gallery-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; }
.kw-look-gallery-grid li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; font-size: 13px; font-weight: 600; }
.kw-look-gallery-grid img { width: 96px; height: 96px; object-fit: contain; background: #FFF3DC; border-radius: 14px; padding: 6px; }
.kw-look-gallery-grid small { font-weight: 400; color: var(--muted, #6b7785); }