.cab-avatar { --ring: 3px; --gap: 2px; position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ice); color: #0758d4; font-weight: 800; font-size: 18px; user-select: none; }
.cab-avatar-sm { --ring: 2px; --gap: 1.5px; width: 32px; height: 32px; font-size: 14px; }
.cab-avatar-xl { --ring: 5px; --gap: 3px; width: 96px; height: 96px; font-size: 36px; }
.cab-avatar > img, .cab-avatar > canvas { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
/* Рамка — кольцо снаружи круга с небольшим зазором. Маска вырезает середину, поэтому работает и с градиентами. */
.cab-avatar:not([data-frame="none"])::after { content: ""; position: absolute; inset: calc(-1 * (var(--ring) + var(--gap))); border-radius: 50%; padding: var(--ring); background: var(--frame); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
[data-frame="brand"] { --frame: linear-gradient(135deg, #0758d4, #3d9bff); }
[data-frame="sunrise"] { --frame: conic-gradient(from 200deg, #ff7a18, #ff3d77, #ffb800, #ff7a18); }
[data-frame="mint"] { --frame: linear-gradient(135deg, #0fb48c, #8ee8cf); }
[data-frame="gold"] { --frame: conic-gradient(from 30deg, #c98a00, #ffe28a, #f5b400, #fff1bd, #c98a00); }
[data-frame="night"] { --frame: linear-gradient(135deg, #14203d, #5b3fd1 60%, #9a7bff); }
[data-frame="rainbow"] { --frame: conic-gradient(#ff4d4d, #ffb800, #2fd06b, #2f8cff, #9a5bff, #ff4d4d); }

.cab-frames { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cab-frame-swatch { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; padding: 0; background: none; border: 2px solid transparent; cursor: pointer; }
.cab-frame-swatch[aria-checked="true"] { border-color: var(--blue); }
.cab-frame-swatch:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cab-frame-ring { width: 30px; height: 30px; border-radius: 50%; background: var(--frame, var(--line)); -webkit-mask: radial-gradient(circle, transparent 9px, #000 9.5px); mask: radial-gradient(circle, transparent 9px, #000 9.5px); }
.cab-frame-swatch[data-frame="none"] .cab-frame-ring { background: repeating-conic-gradient(var(--line) 0 25%, transparent 0 50%) 0 0 / 8px 8px; }

/* Геометрия отверстий задана по каждому исходному PNG. Фото остаётся отдельным слоем. */
[data-frame="smenych-wave"] { --avatar-art: url('/illustrations/avatar-frames/smenych-wave.webp'); --photo-x: 31%; --photo-y: 16%; --photo-size: 48%; }
[data-frame="smenych-hug"] { --avatar-art: url('/illustrations/avatar-frames/smenych-hug.webp'); --photo-x: 23%; --photo-y: 13%; --photo-size: 55%; }
[data-frame="smenych-compact"] { --avatar-art: url('/illustrations/avatar-frames/smenych-compact.webp'); --photo-x: 25%; --photo-y: 25%; --photo-size: 51%; }
.cab-avatar.cab-avatar[data-frame^="smenych-"] { background: transparent; border-radius: 0; }
.cab-avatar.cab-avatar[data-frame^="smenych-"]::after { content: ''; position: absolute; inset: 0; padding: 0; border-radius: 0; background: var(--avatar-art) center / contain no-repeat; -webkit-mask: none; mask: none; pointer-events: none; }
.cab-avatar.cab-avatar[data-frame^="smenych-"] > img,
.cab-avatar.cab-avatar[data-frame^="smenych-"] > canvas,
.cab-avatar.cab-avatar[data-frame^="smenych-"] > .cab-avatar-initial { position: absolute; left: var(--photo-x); top: var(--photo-y); width: var(--photo-size); height: var(--photo-size); border-radius: 50%; object-fit: cover; background: var(--ice); }
.cab-avatar-initial { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; }
.cab-avatar[data-frame^="smenych-"] .cab-avatar-initial { font-size: .6em; }
.cab-frame-swatch.cab-frame-swatch { width: 52px; height: 52px; }
.cab-frame-art { width: 46px; height: 46px; object-fit: contain; pointer-events: none; }
/* В редакторе исходное фото обрезается по кругу, готовая рамка видна в трёх превью. */
.cab-crop-mask.cab-crop-mask[data-frame^="smenych-"] { outline: 1px dashed #ffffffb3; outline-offset: -1px; }
.cab-crop-mask.cab-crop-mask[data-frame^="smenych-"]::after { content: none; }
.account-avatar-row { display: flex; align-items: center; gap: 20px; margin-block: 16px; }
.account-avatar-controls { display: flex; flex-wrap: wrap; gap: 12px; }
.account-avatar-status { min-height: 20px; margin-top: 12px; font-size: 13px; color: var(--muted); }