html{background:#090d0f;color-scheme:dark}
.kino-avatar-frame{--avatar-color:#35bccc;position:relative!important;display:inline-block;flex-shrink:0;overflow:hidden!important;isolation:isolate;border:0!important;border-radius:0!important;box-shadow:none!important;padding:0!important;clip-path:polygon(8% 0,100% 0,100% 100%,0 100%,0 8%)!important;aspect-ratio:1;background:#061319!important}
.kino-avatar-frame>img.kino-avatar{width:100%!important;height:100%!important;display:block;object-fit:cover;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;outline:0!important}
.kino-avatar-frame>img[data-stock-avatar=true]{transform:scale(1.12)}
.kino-avatar-frame::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--avatar-color);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M8.2 .5H99.5V99.5H.5V8.2Z' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* Selection uses its checkmark; the thin frame keeps the image accent. */
.kino-avatar-frame>svg,.avatar-choice>span{z-index:2}
.kino-avatar-frame:focus-visible{outline:2px solid white!important;outline-offset:2px!important}
.friend-chip .kino-avatar-frame{width:30px;height:30px}.walk-friends .kino-avatar-frame{width:35px;height:35px}
.profile-avatar-grid .kino-avatar-frame.selected{box-shadow:none!important;border:0!important}

/* A bounded inner gallery keeps the form actions reachable on every screen. */
.auth-stage>.auth-panel[data-step=register] .avatar-grid{max-height:clamp(132px,35dvh,350px)!important;overflow-y:auto!important;overflow-x:hidden!important;align-content:start;grid-auto-rows:max-content;scrollbar-gutter:stable!important;padding:4px 16px 6px 4px;scrollbar-width:thin;scrollbar-color:#24778a transparent;overscroll-behavior-y:contain}
.auth-panel[data-step=register] .avatar-grid::-webkit-scrollbar{width:6px}.auth-panel[data-step=register] .avatar-grid::-webkit-scrollbar-thumb{background:#24778a;border-radius:4px}
@media(max-width:600px){.auth-stage>.auth-panel[data-step=register] .avatar-grid{max-height:clamp(118px,31dvh,270px)!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}}
.auth-panel button.primary{display:flex;align-items:center;justify-content:center;gap:10px}
.auth-panel button.auth-pending::before{content:'';display:block;flex:none;width:17px;height:17px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:auth-submit-spin .7s linear infinite}
.auth-panel button.auth-pending{opacity:1;cursor:wait}
@keyframes auth-submit-spin{to{transform:rotate(360deg)}}
.kino-profile .profile-avatar-grid{max-height:350px;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}
.kino-profile .profile-header .profile-top-actions>:is(a,button){transition:border-color .18s ease,background-color .18s ease,color .18s ease;cursor:pointer;transform:none}
.kino-profile .profile-header .profile-top-actions>:is(a,button):hover{border-color:#00bdce;background-color:#0a252d;color:#d8faff;transform:none;box-shadow:none}
.kino-profile button.profile-save,.kino-profile button.profile-save:hover{transform:none!important;animation:none!important;background-image:none!important;box-shadow:none!important;transition:background-color .18s ease,border-color .18s ease,color .18s ease!important}
.kino-profile button.profile-save:not([data-saved=true]):hover{background-color:#00313a;border-color:#00dce7;color:#baffff}
.kino-profile button.profile-save::before,.kino-profile button.profile-save::after{display:none!important}
@media(prefers-reduced-motion:reduce){.auth-panel button.auth-pending::before{animation-duration:1.8s}}