.ava {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    font: 700 14px var(--ui);
    color: #17150f;
    background-color: var(--ava-bg, transparent);
    object-fit: cover;
    border: 1px solid var(--line2);
}

.ava.big { width: 58px; height: 58px; font: 700 22px var(--ui); }

.ava-open { display: block; flex: none; line-height: 0; }
.ava-open:hover { text-decoration: none; }

.ava-prev[hidden] { display: none; }

.ava-pick { display: flex; align-items: center; gap: 12px; }

.ava-file { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; min-width: 0; }
.ava-file input[type=file] { max-width: 100%; min-width: 0; }
.ava-pick .hint { margin: 0; overflow-wrap: anywhere; }
.ava-pick.over .hint { color: var(--accent); }

.ava-edit[hidden] { display: none; }
.frow.ava-edit { align-items: start; }
.ava-crop { display: grid; gap: 8px; justify-items: start; min-width: 0; }

.ava-frame {
    width: 240px;
    max-width: 100%;
    background: var(--panel2);
    border: 1px solid var(--line2);
}

.ava-frame canvas { display: block; width: 100%; height: auto; touch-action: none; }

.ava-tools { display: flex; align-items: center; gap: 8px; width: 240px; max-width: 100%; }

.ava-tools input[type=range] {
    flex: 1;
    min-width: 0;
    height: 14px;
    padding: 0;
    background: none;
    border: 0;
    -webkit-appearance: none;
    appearance: none;
}

.ava-tools input[type=range]::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--line);
    border: 1px solid var(--line2);
}

.ava-tools input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 14px;
    margin-top: -6px;
    background: var(--accent);
    border: 1px solid var(--accent-dark);
}

.ava-tools input[type=range]::-moz-range-track {
    height: 4px;
    background: var(--line);
    border: 1px solid var(--line2);
}

.ava-tools input[type=range]::-moz-range-thumb {
    width: 8px;
    height: 12px;
    background: var(--accent);
    border: 1px solid var(--accent-dark);
    border-radius: 0;
}

.c-red { --ring: #b5564f; }
.c-orange { --ring: #c8762a; }
.c-yellow { --ring: #b3a04a; }
.c-green { --ring: #6f9a5a; }
.c-cyan { --ring: #5a8f9a; }
.c-blue { --ring: #6a7fa8; }
.c-violet { --ring: #8f74a8; }
.c-pink { --ring: #a86a8f; }

@property --sw {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.c-rainbow {
    --sw: 0deg;
    --ring: #8f74a8;
    --rbg: conic-gradient(from var(--sw), #b5564f, #b3a04a, #6f9a5a, #5a8f9a, #6a7fa8, #8f74a8, #a86a8f, #b5564f);
    --rrbg: repeating-conic-gradient(from var(--sw), #b5564f 0deg, #b3a04a 15deg, #6f9a5a 30deg, #5a8f9a 45deg, #6a7fa8 60deg, #8f74a8 75deg, #a86a8f 90deg, #b5564f 105deg, #b5564f 120deg);
    animation: sw 5s linear infinite;
}

@keyframes sw {
    to { --sw: 360deg; }
}

.nick.glow, .p-nick.glow { color: var(--ring); }

.nick.c-rainbow, .p-nick.c-rainbow {
    background: linear-gradient(90deg, #b5564f, #b3a04a, #6f9a5a, #5a8f9a, #6a7fa8, #8f74a8, #a86a8f, #b5564f);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: slide 3.5s linear infinite;
}

@keyframes slide {
    to { background-position: 200% center; }
}

.ava.glow { border-color: var(--ring); }

.ava.c-rainbow {
    border: 1px solid transparent;
    background-image: linear-gradient(var(--ava-bg, transparent), var(--ava-bg, transparent)), var(--rrbg);
    background-origin: padding-box, border-box;
    background-clip: padding-box, border-box;
}

.lbl { color: var(--dim); font: 11px var(--mono); }

.palette { display: flex; flex-wrap: wrap; gap: 5px; }

.palette label {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 1px solid transparent;
    cursor: pointer;
}

.palette label:hover { border-color: var(--line2); }
.palette label:has(input:checked) { border-color: var(--accent); }
.palette input { display: none; }
.palette span { width: 12px; height: 12px; background: var(--ring); }
.palette label.off span { background: #2b2b30; }
.palette label.c-rainbow span { background: var(--rrbg); }

.palette label[class^="fl-"] { width: 22px; height: 22px; }
.palette label[class^="fl-"] span { width: 20px; height: 14px; }

.palette label.fl-ru span { background: linear-gradient(#d9d6cd 0 33.4%, #2f5f9e 33.4% 66.7%, #a63b30 66.7% 100%); }
.palette label.fl-ua span { background: linear-gradient(#3a6fa8 0 50%, #c8a83c 50% 100%); }
.palette label.fl-by span {
    background:
        linear-gradient(#d9d6cd, #d9d6cd) 0 0 / 22% 100% no-repeat,
        linear-gradient(#bf3542 0 66.7%, #4c9e56 66.7% 100%);
}
.palette label.fl-jp span {
    background:
        radial-gradient(circle at 50% 50%, #cf3549 0 30%, transparent 31%),
        #d9d6cd;
}
.palette label.fl-cn span {
    background-color: #c23b4d;
    background-image: var(--flag-cn);
    background-size: 100% 100%;
}
.palette label.fl-de span { background: linear-gradient(#3f3f47 0 33.4%, #c23b4d 33.4% 66.7%, #e8c15a 66.7% 100%); }
.palette label.fl-us span {
    background:
        linear-gradient(#454a7a, #454a7a) 0 0 / 45% 55% no-repeat,
        linear-gradient(#b8455a 0 14.3%, #d9d6cd 14.3% 28.6%, #b8455a 28.6% 42.9%, #d9d6cd 42.9% 57.2%, #b8455a 57.2% 71.5%, #d9d6cd 71.5% 85.8%, #b8455a 85.8% 100%);
}
.palette label.fl-mlm span {
    background: linear-gradient(#2f9e8f 0 16.7%, #56c1a8 16.7% 33.3%, #a5dbc8 33.3% 50%, #d9d6cd 50% 66.7%, #7fa9d9 66.7% 83.3%, #4f6fc2 83.3% 100%);
}