html.rndarkmode-active {
    filter: invert(1) hue-rotate(180deg);
}

html.rndarkmode-active img,
html.rndarkmode-active video,
html.rndarkmode-active iframe,
html.rndarkmode-active svg image {
    filter: invert(1) hue-rotate(180deg);
}

.rndarkmodebtn {
    z-index: 100000;
}
.rndarkmodebtn.rndarkmode-top_left     { position: fixed; top: 15px;    left: 15px;  }
.rndarkmodebtn.rndarkmode-top_right    { position: fixed; top: 15px;    right: 15px; }
.rndarkmodebtn.rndarkmode-bottom_left  { position: fixed; bottom: 15px; left: 15px;  }
.rndarkmodebtn.rndarkmode-bottom_right { position: fixed; bottom: 15px; right: 15px; }
.rndarkmodebtn.rndarkmode-center_left  { position: fixed; top: 50%; left: 15px;  transform: translateY(-50%); }
.rndarkmodebtn.rndarkmode-center_right { position: fixed; top: 50%; right: 15px; transform: translateY(-50%); }

.rn-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.rn-toggle__track {
    position: relative;
    width: 52px;
    height: 28px;
    background: #b0b0b0;
    border-radius: 14px;
    border: 2px solid #888;
    transition: background 0.3s, border-color 0.3s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    flex-shrink: 0;
}

.rn-toggle__thumb {
    position: absolute;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s, background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
}

.rn-toggle__thumb::after {
    content: '☀️';
}

.rn-toggle.active .rn-toggle__track {
    background: #5a5a8a;
    border-color: #9090c0;
}

.rn-toggle.active .rn-toggle__thumb {
    transform: translateY(-50%) translateX(24px);
    background: #e0e0ff;
}

.rn-toggle.active .rn-toggle__thumb::after {
    content: '🌙';
}

html.rndarkmode-active .rndarkmodebtn {
    filter: invert(1) hue-rotate(180deg);
}