.sn_version_setting {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 2.8rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-top: 1px solid #ebebeb;
    background: #fff;
    color: #5c6573;
    text-align: left;
    cursor: pointer;
}

.sn_version_notice {
    position: absolute;
    z-index: 8;
    right: 0.65rem;
    bottom: calc(100% + 0.5rem);
    width: max-content;
    max-width: min(13rem, calc(100vw - 2rem));
    padding: 0.48rem 0.7rem;
    border-radius: 0.65rem;
    background: var(--main);
    box-shadow: 0 0.45rem 1.1rem rgba(255, 109, 1, 0.28);
    color: #fff;
    font-size: clamp(0.68rem, 2.5vw, 0.78rem);
    font-weight: 800;
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
    animation: sn-version-bounce 1.15s ease-in-out infinite;
}

.sn_version_notice::after {
    position: absolute;
    top: 100%;
    right: 1.15rem;
    width: 0;
    height: 0;
    border: 0.38rem solid transparent;
    border-top-color: var(--main);
    content: "";
}

.sn_version_notice[hidden] { display: none; }

.sn_version_icon { font-size: 1.1rem; color: var(--main); }
.sn_version_text { display: none; min-width: 0; flex: 1; flex-direction: column; }
.sn_version_text b { font-size: clamp(0.72rem, 2.6vw, 0.82rem); color: #222; }
.sn_version_text small { font-size: clamp(0.68rem, 2.4vw, 0.76rem); color: #7a8491; }
.sn_version_arrow { display: none; font-size: 1rem; }
body.nav-open .sn_version_text { display: flex; }
body.nav-open .sn_version_arrow { display: block; }

@keyframes sn-version-bounce {
    0%, 100% { transform: translateY(0); }
    45% { transform: translateY(-0.42rem); }
    65% { transform: translateY(-0.12rem); }
}

@media (prefers-reduced-motion: reduce) {
    .sn_version_notice { animation: none; }
}