.avatar.av109 { background: #e3ecea; overflow: hidden; }
.avatar.av109 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av109-cam { position: absolute; right: -2px; bottom: -2px; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--q8-card, #fff); background: var(--q8-teal, #0b3537); color: #fff; display: grid; place-items: center; cursor: pointer; z-index: 2; box-shadow: 0 4px 12px rgba(14,46,48,.25); }
.av109-cam svg { width: 16px; height: 16px; }
.av109-cam:hover { background: var(--q8-teal-3, #175659); }
.q8b-mp-av .av109-cam { right: 0; bottom: 0; }
.me90-hero .av109-cam { position: absolute; }
.av109-pick { display: flex; flex-direction: column; gap: 18px; }
.av109-now { display: flex; align-items: center; gap: 18px; padding: 14px; border-radius: 20px; background: var(--q8-cream, #efeadf); }
.av109-now > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.av109-now small { color: var(--q8-ink-3, #6b7c7b); }
.av109-big { --s: 92px; width: 92px; height: 92px; flex: none; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 4px var(--q8-card, #fff); }
.av109-big img { width: 100%; height: 100%; object-fit: cover; }
.av109-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.av109-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 10px; }
.av109-o { aspect-ratio: 1; border-radius: 50%; border: 3px solid transparent; padding: 0; overflow: hidden; background: none; cursor: pointer; transition: transform .15s, border-color .15s; }
.av109-o img { width: 100%; height: 100%; display: block; }
.av109-o:hover { transform: scale(1.06); }
.av109-o.on { border-color: var(--q8-teal, #0b3537); box-shadow: 0 0 0 3px var(--q8-lime, #e8dc3a); }
body.q8 .pn108.cv109::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 520px; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(90deg, rgba(239,234,223,.92) 0%, rgba(239,234,223,.72) 38%, rgba(239,234,223,.18) 78%, rgba(239,234,223,.05) 100%), var(--cv109) var(--cv109p, 50% 50%) / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgba(0,0,0,.55) 70%, transparent 100%); }
body.q8.r108-home .pn108.cv109:has(.ch108) { background: var(--q8-cream); }
:root[data-theme="dark"] body.q8 .pn108.cv109::before { background: linear-gradient(90deg, rgba(11,40,42,.94) 0%, rgba(11,40,42,.7) 40%, rgba(11,40,42,.2) 80%, rgba(11,40,42,.08) 100%), var(--cv109) var(--cv109p, 50% 50%) / cover no-repeat; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.q8 .pn108.cv109::before { background: linear-gradient(90deg, rgba(11,40,42,.94) 0%, rgba(11,40,42,.7) 40%, rgba(11,40,42,.2) 80%, rgba(11,40,42,.08) 100%), var(--cv109) var(--cv109p, 50% 50%) / cover no-repeat; } }
.cv109-btn { position: absolute; top: 14px; right: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,253,248,.92); color: var(--q8-ink, #0e2e30); font: 700 12.5px var(--q8-font, inherit); cursor: pointer; box-shadow: 0 4px 14px rgba(14,46,48,.14); backdrop-filter: blur(6px); }
.cv109-btn svg { width: 15px; height: 15px; }
.cv109-btn:hover { background: #fff; }
.ch108-hero .cv109-btn { top: auto; bottom: -6px; right: 0; opacity: 0; transition: opacity .2s; }
.ch108-hero:hover .cv109-btn, .ch108-hero .cv109-btn:focus-visible { opacity: 1; }
@media (hover: none) { .ch108-hero .cv109-btn { opacity: 1; position: static; justify-self: start; } }
.cv109-host { position: relative; isolation: isolate; }
.cv109-host > .cv109-img, body[data-q8d="profile"] main.q8d-prof .me90-hero > .cv109-img { position: absolute; inset: 0; z-index: -1; background-size: cover; background-repeat: no-repeat; pointer-events: none; border-radius: inherit;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.45) 66%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0,0,0,.45) 66%, transparent 92%); }
body[data-q8d="profile"] main.q8d-prof .me90-hero.cv109-has::before { opacity: 0; }
body[data-q8d="profile"] main.q8d-prof .me90-hero > .cv109-btn { position: absolute; }
.profile-public.cv109-host { overflow: hidden; }
.profile-public.cv109-has { padding-top: 120px; }
.cv109-prev { height: 220px; border-radius: 18px; background: linear-gradient(115deg, var(--q8-lime, #e8dc3a) 0 52%, var(--q8-red, #d9472f) 52.2% 100%); background-size: cover; display: grid; place-items: center; position: relative; touch-action: none; cursor: grab; overflow: hidden; }
.cv109-prev.has { background-repeat: no-repeat; }
.cv109-prev.has::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, var(--q8-card, #fffdf8)); pointer-events: none; }
.cv109-prev .hb91-hint { position: relative; z-index: 1; }
.qt109-grip { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--q8-ink-3, #6b7c7b); display: grid; place-items: center; cursor: grab; touch-action: none; margin-left: -6px; flex: none; }
.qt109-grip:hover, .qt109-grip:focus-visible { background: var(--q8-cream-2, #e6e0d2); color: var(--q8-ink, #0e2e30); }
.qt109-grip svg { width: 16px; height: 16px; }
.qt-card.qt109-drag { position: relative; z-index: 20; box-shadow: 0 18px 40px rgba(14,46,48,.25); cursor: grabbing; transition: none; }
.qt-card.qt109-over { outline: 3px dashed var(--q8-lime, #e8dc3a); outline-offset: 3px; }