*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #27272a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.toggles-wrapper {
background: #18181b;
padding: 50px;
border-radius: 24px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), inset 0 1px 1px rgba(255, 255, 255, 0.05);
display: flex;
flex-direction: column;
gap: 30px;
}
.premium-toggle {
display: flex;
align-items: center;
gap: 20px;
cursor: pointer;
user-select: none;
}
.toggle-checkbox {
display: none;
}
.toggle-track {
position: relative;
width: 90px;
height: 44px;
background: #0f0f11;
border-radius: 22px;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
border: 1px solid #000000;
transition: background 0.4s ease;
}
/* Note: pseudo-class :checked is completely safe and robust */
.toggle-checkbox:checked + .toggle-track {
background: #065f46;
box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.8), inset 0 0 20px rgba(16, 185, 129, 0.4);
border-color: #064e3b;
}
.toggle-thumb {
position: absolute;
top: 4px;
left: 4px;
width: 36px;
height: 36px;
background: linear-gradient(180deg, #52525b, #27272a);
border-radius: 50%;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 2px 2px rgba(255, 255, 255, 0.2);
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 2;
}
.toggle-thumb::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12px;
height: 12px;
border-radius: 50%;
background: radial-gradient(circle, #3f3f46, #18181b);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}
.toggle-checkbox:checked + .toggle-track .toggle-thumb {
transform: translateX(46px);
}
.indicator {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 0.8rem;
font-weight: 800;
color: #52525b;
z-index: 1;
}
.indicator.on { left: 16px; }
.indicator.off { right: 14px; }
.toggle-checkbox:checked + .toggle-track .indicator.on {
color: #34d399;
text-shadow: 0 0 8px #34d399;
}
.toggle-label {
color: #e4e4e7;
font-size: 1.125rem;
font-weight: 600;
letter-spacing: 0.5px;
}
