/* =========================================
   UIVERSE.IO MASSIVE COMPONENT GALLERY
   ========================================= */

/* Display logic */
.uiverse-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 80px;
  align-items: center;
  padding: 80px 20px;
  max-width: 1400px;
  margin: 0 auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 768px) {
    .uiverse-gallery {
        gap: 40px;
        padding: 40px 10px;
        grid-template-columns: 1fr;
    }
    .smit-parent, .nawsome-switch, .nawsome-svg-frame, .glow-card, .flip-card, .radio-input, .complex-switch {
        transform: scale(0.75);
    }
    .uiverse-widget {
        min-height: 280px;
        padding: 20px;
    }
}

.uiverse-widget {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 350px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 32px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 40px;
  overflow: hidden;
  transition: background 0.4s ease, border 0.4s ease;
}

.uiverse-widget.widget-dark-mode {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.8);
}


/* ----------------------------------------------------
   1. Toggle - njesenberger 
   ---------------------------------------------------- */
.toggle-container {
  --active-color: #1868e3;
  --inactive-color: #d3d3d6;
  position: relative;
  aspect-ratio: 292 / 142;
  height: 4em;
}
.toggle-input {
  appearance: none; margin: 0; position: absolute; z-index: 1; top: 0; left: 0;
  width: 100%; height: 100%; cursor: pointer;
}
.njesenberger-toggle { width: 100%; height: 100%; overflow: visible; }
.toggle-background { fill: var(--inactive-color); transition: fill .4s; }
.toggle-input:checked + .njesenberger-toggle .toggle-background { fill: var(--active-color); }
.toggle-circle-center { transform-origin: center; transition: transform .6s; }
.toggle-input:checked + .njesenberger-toggle .toggle-circle-center { transform: translateX(150px); }
.toggle-circle { transform-origin: center; transition: transform .45s; backface-visibility: hidden; }
.toggle-circle.left { transform: scale(1); }
.toggle-input:checked + .njesenberger-toggle .toggle-circle.left { transform: scale(0); }
.toggle-circle.right { transform: scale(0); }
.toggle-input:checked + .njesenberger-toggle .toggle-circle.right { transform: scale(1); }

/* ----------------------------------------------------
   2. Glowing Border Card - ElSombrero2 
   ---------------------------------------------------- */
.glow-card {
  width: 190px; height: 254px; background: #171717; display: flex; justify-content: center;
  align-items: center; overflow: hidden; position: relative; box-shadow: 0px 0px 3px 1px #00000088; cursor: pointer;
}
.glow-card .glow-content {
  border-radius: 5px; background: #171717; width: 186px; height: 250px; z-index: 1;
  padding: 20px; color: white; display: flex; justify-content: center; align-items: center; font-weight: bold;
}
.glow-content::before {
  opacity: 0; transition: opacity 300ms; content: " "; display: block; background: white;
  width: 5px; height: 50px; position: absolute; filter: blur(50px); overflow: hidden;
}
.glow-card:hover .glow-content::before { opacity: 1; }
.glow-card::before {
  opacity: 0; content: " "; position: absolute; display: block; width: 80px; height: 360px;
  background: linear-gradient(#ff2288, #387ef0); transition: opacity 300ms;
  animation: rotation_9018 8000ms infinite linear; animation-play-state: paused;
}
.glow-card:hover::before { opacity: 1; animation-play-state: running; }
.glow-card::after { position: absolute; content: " "; display: block; width: 250px; height: 360px; background: #17171733; backdrop-filter: blur(50px); }
@keyframes rotation_9018 { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* ----------------------------------------------------
   3. 3D Spinner - bociKond 
   ---------------------------------------------------- */
.bocikond-spinner {
  width: 70.4px; height: 70.4px; --clr: rgb(247, 197, 159); --clr-alpha: rgb(247, 197, 159,.1);
  animation: spinner 1.6s infinite ease; transform-style: preserve-3d; margin: 40px;
}
.bocikond-spinner > div { background-color: var(--clr-alpha); height: 100%; position: absolute; width: 100%; border: 3.5px solid var(--clr); }
.bocikond-spinner div:nth-of-type(1) { transform: translateZ(-35.2px) rotateY(180deg); }
.bocikond-spinner div:nth-of-type(2) { transform: rotateY(-270deg) translateX(50%); transform-origin: top right; }
.bocikond-spinner div:nth-of-type(3) { transform: rotateY(270deg) translateX(-50%); transform-origin: center left; }
.bocikond-spinner div:nth-of-type(4) { transform: rotateX(90deg) translateY(-50%); transform-origin: top center; }
.bocikond-spinner div:nth-of-type(5) { transform: rotateX(-90deg) translateY(50%); transform-origin: bottom center; }
.bocikond-spinner div:nth-of-type(6) { transform: translateZ(35.2px); }
@keyframes spinner {
  0% { transform: rotate(45deg) rotateX(-25deg) rotateY(25deg); }
  50% { transform: rotate(45deg) rotateX(-385deg) rotateY(25deg); }
  100% { transform: rotate(45deg) rotateX(-385deg) rotateY(385deg); }
}

/* ----------------------------------------------------
   4. Flipping Card - ElSombrero2 
   ---------------------------------------------------- */
.flip-card { overflow: visible; width: 190px; height: 254px; }
.flip-content { width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 300ms; box-shadow: 0px 0px 10px 1px #000000ee; border-radius: 5px; }
.flip-front, .flip-back { background-color: #151515; position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 5px; overflow: hidden; }
.flip-back { width: 100%; height: 100%; justify-content: center; display: flex; align-items: center; overflow: hidden; }
.flip-back::before { position: absolute; content: ' '; display: block; width: 160px; height: 160%; background: linear-gradient(90deg, transparent, #ff9966, #ff9966, #ff9966, #ff9966, transparent); animation: rotation_481 5000ms infinite linear; }
.flip-back-content { position: absolute; width: 99%; height: 99%; background-color: #151515; border-radius: 5px; color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 30px; font-weight: bold;}
.flip-card:hover .flip-content { transform: rotateY(180deg); }
@keyframes rotation_481 { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(360deg); } }
.flip-front { transform: rotateY(180deg); color: white; }
.flip-front .flip-front-content { position: absolute; width: 100%; height: 100%; padding: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.flip-front-content .badge { background-color: #00000055; padding: 2px 10px; border-radius: 10px; backdrop-filter: blur(2px); width: fit-content; font-size: 12px;}
.flip-description { box-shadow: 0px 0px 10px 5px #00000088; width: 100%; padding: 10px; background-color: #00000099; backdrop-filter: blur(5px); border-radius: 5px; }
.flip-title { font-size: 11px; max-width: 100%; display: flex; justify-content: space-between; font-weight: bold;}
.flip-title p { width: 50%; }
.flip-card-footer { color: #ffffff88; margin-top: 5px; font-size: 8px; }
.flip-circle { width: 90px; height: 90px; border-radius: 50%; background-color: #ffbb66; position: absolute; filter: blur(15px); animation: floating 2600ms infinite linear; }
#flip-bottom { background-color: #ff8866; left: 50px; top: 100px; width: 150px; height: 150px; animation-delay: -800ms; }
#flip-right { background-color: #ff2233; left: 160px; top: -80px; width: 130px; height: 130px; animation-delay: -1800ms; }
@keyframes floating { 0% { transform: translateY(0px); } 50% { transform: translateY(10px); } 100% { transform: translateY(0px); } }

/* ----------------------------------------------------
   5. Hamster Wheel - Nawsome 
   ---------------------------------------------------- */
.wheel-and-hamster { --dur: 1s; position: relative; width: 12em; height: 12em; font-size: 14px; }
.wheel, .hamster, .hamster div, .spoke { position: absolute; }
.wheel, .spoke { border-radius: 50%; top: 0; left: 0; width: 100%; height: 100%; }
.wheel { background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%); z-index: 2; }
.hamster { animation: hamster var(--dur) ease-in-out infinite; top: 50%; left: calc(50% - 3.5em); width: 7em; height: 3.75em; transform: rotate(4deg) translate(-0.8em,1.85em); transform-origin: 50% 0; z-index: 1; }
.hamster__head { animation: hamsterHead var(--dur) ease-in-out infinite; background: hsl(30,90%,55%); border-radius: 70% 30% 0 100% / 40% 25% 25% 60%; box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset, 0.75em -1.55em 0 hsl(30,90%,90%) inset; top: 0; left: -2em; width: 2.75em; height: 2.5em; transform-origin: 100% 50%; }
.hamster__ear { animation: hamsterEar var(--dur) ease-in-out infinite; background: hsl(0,90%,85%); border-radius: 50%; box-shadow: -0.25em 0 hsl(30,90%,55%) inset; top: -0.25em; right: -0.25em; width: 0.75em; height: 0.75em; transform-origin: 50% 75%; }
.hamster__eye { animation: hamsterEye var(--dur) linear infinite; background-color: hsl(0,0%,0%); border-radius: 50%; top: 0.375em; left: 1.25em; width: 0.5em; height: 0.5em; }
.hamster__nose { background: hsl(0,90%,75%); border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%; top: 0.75em; left: 0; width: 0.2em; height: 0.25em; }
.hamster__body { animation: hamsterBody var(--dur) ease-in-out infinite; background: hsl(30,90%,90%); border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%; box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset, 0.15em -0.5em 0 hsl(30,90%,80%) inset; top: 0.25em; left: 2em; width: 4.5em; height: 3em; transform-origin: 17% 50%; transform-style: preserve-3d; }
.hamster__limb--fr, .hamster__limb--fl { clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%); top: 2em; left: 0.5em; width: 1em; height: 1.5em; transform-origin: 50% 0; }
.hamster__limb--fr { animation: hamsterFRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%); transform: rotate(15deg) translateZ(-1px); }
.hamster__limb--fl { animation: hamsterFLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%); transform: rotate(15deg); }
.hamster__limb--br, .hamster__limb--bl { border-radius: 0.75em 0.75em 0 0; clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%); top: 1em; left: 2.8em; width: 1.5em; height: 2.5em; transform-origin: 50% 30%; }
.hamster__limb--br { animation: hamsterBRLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%); transform: rotate(-25deg) translateZ(-1px); }
.hamster__limb--bl { animation: hamsterBLLimb var(--dur) linear infinite; background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%); transform: rotate(-25deg); }
.hamster__tail { animation: hamsterTail var(--dur) linear infinite; background: hsl(0,90%,85%); border-radius: 0.25em 50% 50% 0.25em; box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset; top: 1.5em; right: -0.5em; width: 1em; height: 0.5em; transform: rotate(30deg) translateZ(-1px); transform-origin: 0.25em 0.25em; }
.spoke { animation: spoke var(--dur) linear infinite; background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%), linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat; }
@keyframes hamster { from, to { transform: rotate(4deg) translate(-0.8em,1.85em); } 50% { transform: rotate(0) translate(-0.8em,1.85em); } }
@keyframes hamsterHead { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(8deg); } }
@keyframes hamsterEye { from, 90%, to { transform: scaleY(1); } 95% { transform: scaleY(0); } }
@keyframes hamsterEar { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(12deg); } }
@keyframes hamsterBody { from, 25%, 50%, 75%, to { transform: rotate(0); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-2deg); } }
@keyframes hamsterFRLimb { from, 25%, 50%, 75%, to { transform: rotate(50deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-30deg) translateZ(-1px); } }
@keyframes hamsterFLLimb { from, 25%, 50%, 75%, to { transform: rotate(-30deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(50deg); } }
@keyframes hamsterBRLimb { from, 25%, 50%, 75%, to { transform: rotate(-60deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(20deg) translateZ(-1px); } }
@keyframes hamsterBLLimb { from, 25%, 50%, 75%, to { transform: rotate(20deg); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(-60deg); } }
@keyframes hamsterTail { from, 25%, 50%, 75%, to { transform: rotate(30deg) translateZ(-1px); } 12.5%, 37.5%, 62.5%, 87.5% { transform: rotate(10deg) translateZ(-1px); } }
@keyframes spoke { from { transform: rotate(0); } to { transform: rotate(-1turn); } }

/* ----------------------------------------------------
   6. Phone Toggle - Pradeepsaranbishnoi 
   ---------------------------------------------------- */
.phone-app { position: relative; width: 100%; display: flex; justify-content: center; height: 350px; margin-top: 150px; }
.main-circle { width: 35rem; height: 35rem; border-radius: 100%; background: linear-gradient(40deg, #FF0080,#FF8C00 70%); position: absolute; z-index: 1; left: 50%; transform: translate(-50%, -70%); pointer-events: none;}
.phone { position: relative; z-index: 2; width: 18rem; height: 17rem; background-color: #fff; box-shadow: 0 4px 35px rgba(0,0,0,.1); border-radius: 40px; display: flex; flex-direction: column; transition: background-color 0.4s;}
.phone-menu { font-size: 80%; opacity: .4; padding: .8rem 1.8rem; display: flex; justify-content: space-between; align-items: center; }
.phone-icons { display: flex; margin-top: .5rem; }
.phone-battery { width: .85rem; height: .45rem; background-color: black; }
.phone-network { width: 0; height: 0; border-style: solid; border-width: 0 6.8px 7.2px 6.8px; border-color: transparent transparent black transparent; transform: rotate(135deg); margin: .12rem .5rem; }
.phone-content { display: flex; flex-direction: column; margin: auto; text-align: center; width: 70%; transform: translateY(5%); }
.phone-circle { position: relative; border-radius: 100%; width: 8rem; height: 8rem; background: linear-gradient(40deg, #FF0080,#FF8C00 70%); margin: auto; }
.phone-crescent { position: absolute; border-radius: 100%; right: 0; width: 6rem; height: 6rem; background: white; transform: scale(0); transform-origin: top right; transition: transform .6s cubic-bezier(0.645, 0.045, 0.355, 1); }
.phone-label { height: 2.8rem; width: 100%; background-color: rgba(0,0,0,.1); border-radius: 100px; position: relative; margin: 1.8rem 0 4rem 0; cursor: pointer; }
.phone-toggle-switch { position: absolute; height: 100%; width: 50%; background-color: #fff; box-shadow: 0 2px 15px rgba(0,0,0,.15); transition: transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94); border-radius: 100px; }
.phone-names { font-size: 90%; font-weight: bolder; color: black; width: 65%; margin-left: 17.5%; margin-top: 6.5%; position: absolute; display: flex; justify-content: space-between; user-select: none; }
.phone-dark { opacity: .5; }
.phone-time { color: black; font-weight: bold;}
.phone-app [type="checkbox"] { display: none; }
.phone-app [type="checkbox"]:checked ~ .phone .phone-toggle-switch { transform: translateX(100%); background-color: #34323D; }
.phone-app [type="checkbox"]:checked ~ .phone .phone-dark { opacity: 1; color: white; }
.phone-app [type="checkbox"]:checked ~ .phone .phone-light { opacity: .5; color: white; }
.phone-app [type="checkbox"]:checked ~ .phone { background-color: #26242E; color: white; }
.phone-app [type="checkbox"]:checked ~ .phone .phone-crescent { transform: scale(1); background: #26242E; }
.phone-app [type="checkbox"]:checked ~ .main-circle, .phone-app [type="checkbox"]:checked ~ .phone .phone-circle { background: linear-gradient(40deg, #8983F7, #A3DAFB 70%); }
.phone-app [type="checkbox"]:checked ~ .phone .phone-menu .phone-time { color: white; }
.phone-app [type="checkbox"]:checked ~ .phone .phone-menu .phone-network { border-color: transparent transparent white transparent; }
.phone-app [type="checkbox"]:checked ~ .phone .phone-menu .phone-battery { background-color: white; }

/* ----------------------------------------------------
   7. Outline Hover Button - satyamchaudharydev 
   ---------------------------------------------------- */
.outline-btn {
  --border-right: 6px;
  --text-stroke-color: rgba(0,0,0,0.3);
  --animation-color: var(--accent-color);
  --fs-size: 2em;
  margin: 0; height: auto; background: transparent; padding: 0; border: none; cursor: pointer;
  letter-spacing: 3px; text-decoration: none; font-size: var(--fs-size); font-family: "Arial", sans-serif; font-weight: bold;
  position: relative; text-transform: uppercase; color: transparent;
  -webkit-text-stroke: 1px var(--text-stroke-color);
}
.outline-hover-text {
  position: absolute; box-sizing: border-box; content: attr(data-text); color: var(--animation-color);
  width: 0%; inset: 0; border-right: var(--border-right) solid var(--animation-color); overflow: hidden;
  transition: 0.5s; -webkit-text-stroke: 1px var(--animation-color); white-space: nowrap;
}
.outline-btn:hover .outline-hover-text { width: 100%; filter: drop-shadow(0 0 23px var(--animation-color)); }

/* ----------------------------------------------------
   8. Day/Night Toggle - Galahhad 
   ---------------------------------------------------- */
.galahhad-theme-switch {
  --toggle-size: 30px; --container-width: 5.625em; --container-height: 2.5em; --container-radius: 6.25em;
  --container-light-bg: #3D7EAE; --container-night-bg: #1D1F2C; --circle-container-diameter: 3.375em;
  --sun-moon-diameter: 2.125em; --sun-bg: #ECCA2F; --moon-bg: #C4C9D1; --spot-color: #959DB1;
  --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
  --stars-color: #fff; --clouds-color: #F3FDFF; --back-clouds-color: #AACADF;
  --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25); --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
  display: block; position: relative;
}
.galahhad-theme-switch, .galahhad-theme-switch *, .galahhad-theme-switch *::before, .galahhad-theme-switch *::after { box-sizing: border-box; font-size: var(--toggle-size); }
.galahhad-container { width: var(--container-width); height: var(--container-height); background-color: var(--container-light-bg); border-radius: var(--container-radius); overflow: hidden; cursor: pointer; box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94); transition: var(--transition); position: relative; }
.galahhad-container::before { content: ""; position: absolute; z-index: 1; inset: 0; box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset; border-radius: var(--container-radius); }
.galahhad-checkbox { display: none; }
.galahhad-circle-container { width: var(--circle-container-diameter); height: var(--circle-container-diameter); background-color: rgba(255, 255, 255, 0.1); position: absolute; left: var(--circle-container-offset); top: var(--circle-container-offset); border-radius: var(--container-radius); box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1); display: flex; transition: var(--circle-transition); pointer-events: none; }
.galahhad-sun-moon { pointer-events: auto; position: relative; z-index: 2; width: var(--sun-moon-diameter); height: var(--sun-moon-diameter); margin: auto; border-radius: var(--container-radius); background-color: var(--sun-bg); box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset; filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)); overflow: hidden; transition: var(--transition); }
.galahhad-moon { transform: translateX(100%); width: 100%; height: 100%; background-color: var(--moon-bg); border-radius: inherit; box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset; transition: var(--transition); position: relative; }
.galahhad-spot { position: absolute; top: 0.75em; left: 0.312em; width: 0.75em; height: 0.75em; border-radius: var(--container-radius); background-color: var(--spot-color); box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset; }
.galahhad-spot:nth-of-type(2) { width: 0.375em; height: 0.375em; top: 0.937em; left: 1.375em; }
.galahhad-spot:nth-last-of-type(3) { width: 0.25em; height: 0.25em; top: 0.312em; left: 0.812em; }
.galahhad-clouds { width: 1.25em; height: 1.25em; background-color: var(--clouds-color); border-radius: var(--container-radius); position: absolute; bottom: -0.625em; left: 0.312em; box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color); transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25); }
.galahhad-stars { position: absolute; color: var(--stars-color); top: -100%; left: 0.312em; width: 2.75em; height: auto; transition: var(--transition); }
.galahhad-checkbox:checked + .galahhad-container { background-color: var(--container-night-bg); }
.galahhad-checkbox:checked + .galahhad-container .galahhad-circle-container { left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter)); }
.galahhad-checkbox:checked + .galahhad-container .galahhad-moon { transform: translate(0); }
.galahhad-checkbox:checked + .galahhad-container .galahhad-clouds { bottom: -4.062em; }
.galahhad-checkbox:checked + .galahhad-container .galahhad-stars { top: 50%; transform: translateY(-50%); }

/* ----------------------------------------------------
   9. SVG Frame - Nawsome 
   ---------------------------------------------------- */
.nawsome-svg-frame { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; display: flex; justify-content: center; align-items: center; }
.nawsome-svg-frame svg { position: absolute; transition: .5s; z-index: calc(1 - (0.2 * var(--j))); transform-origin: center; width: 344px; height: 344px; fill: none; }
.nawsome-svg-frame:hover svg { transform: rotate(-80deg) skew(30deg) translateX(calc(45px * var(--i))) translateY(calc(-35px * var(--i))); }
.nawsome-svg-frame svg #center { transition: .5s; transform-origin: center; }
.nawsome-svg-frame:hover svg #center { transform: rotate(-30deg) translateX(45px) translateY(-3px); }
#out2 { animation: rotate16 7s ease-in-out infinite alternate; transform-origin: center; }
#out3 { animation: rotate16 3s ease-in-out infinite alternate; transform-origin: center; stroke: var(--accent-color); }
#inner3, #inner1 { animation: rotate16 4s ease-in-out infinite alternate; transform-origin: center; }
#center1 { fill: var(--accent-color); animation: rotate16 2s ease-in-out infinite alternate; transform-origin: center; }

/* ----------------------------------------------------
   10. Isometric Social Cards - Praashoo7 
   ---------------------------------------------------- */
.praashoo7-main-back { position: absolute; border-radius: 10px; transform: rotate(90deg); width: 180px; height: 180px; background: linear-gradient(270deg, #03a9f4, #cc39a4, #ffb5d2); z-index: -2; box-shadow: inset 0px 0px 180px 5px #ffffff; }
.praashoo7-main { display: flex; flex-wrap: wrap; width: 200px; align-items: center; justify-content: center; z-index: 1; position: relative; transform: scale(0.65); }
.praashoo7-card { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-top-left-radius: 10px; background: rgba(255, 255, 255, 0.596); backdrop-filter: blur(5px); border: 1px solid transparent; transition: 0.4s ease-in-out, 0.2s background-color ease-in-out; }
.praashoo7-card:nth-child(2) { border-radius: 0; }
.praashoo7-card:nth-child(3) { border-top-right-radius: 10px; border-top-left-radius: 0; }
.praashoo7-card:nth-child(4), .praashoo7-card:nth-child(5), .praashoo7-card:nth-child(6), .praashoo7-card:nth-child(8) { border-radius: 0; }
.praashoo7-card:nth-child(7) { border-bottom-left-radius: 10px; border-top-left-radius: 0; }
.praashoo7-card:nth-child(9) { border-bottom-right-radius: 10px; border-top-left-radius: 0; }
.praashoo7-main:hover { width: 200px; cursor: pointer; }
.praashoo7-main:hover .praashoo7-main-back { opacity: 0; }
.praashoo7-main:hover .praashoo7-card { margin: 0.2em; border-radius: 10px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.2); }
.praashoo7-text { position: absolute; font-size: 0.7em; transition: 0.4s ease-in-out; color: black; text-align: center; font-weight: bold; letter-spacing: 0.33em; z-index: 3; }
.praashoo7-main:hover .praashoo7-text { opacity: 0; z-index: -3; }
.praashoo7-icon { opacity: 0; transition: 0.2s; fill: black; font-weight: bold; font-family: sans-serif; }
.praashoo7-main:hover .praashoo7-icon { opacity: 1; }
.praashoo7-card:nth-child(1):hover { background-color: #cc39a4; } .praashoo7-card:nth-child(1):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(2):hover { background-color: #03a9f4; } .praashoo7-card:nth-child(2):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(3):hover { background-color: #ffb5d2; } .praashoo7-card:nth-child(3):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(4):hover { background-color: #1e1f26; } .praashoo7-card:nth-child(4):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(5):hover { background-image: linear-gradient(#bf66ff, #6248ff, #00ddeb); } .praashoo7-card:nth-child(5):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(6):hover { background-color: #8c9eff; } .praashoo7-card:nth-child(6):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(7):hover { background-color: black; } .praashoo7-card:nth-child(7):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(8):hover { background-color: #29b6f6; } .praashoo7-card:nth-child(8):hover .praashoo7-icon { color: white; fill: white; }
.praashoo7-card:nth-child(9):hover { background-color: rgb(255, 69, 0); } .praashoo7-card:nth-child(9):hover .praashoo7-icon { color: white; fill: white; }

/* ----------------------------------------------------
   11. Glassmorphism Card - Smit-Prajapati 
   ---------------------------------------------------- */
.smit-parent { width: 290px; height: 300px; perspective: 1000px; }
.smit-card { height: 100%; border-radius: 50px; background: linear-gradient(135deg, rgb(0, 255, 214) 0%, rgb(8, 226, 96) 100%); transition: all 0.5s ease-in-out; transform-style: preserve-3d; box-shadow: rgba(5, 71, 17, 0) 40px 50px 25px -40px, rgba(5, 71, 17, 0.2) 0px 25px 25px -5px; }
.smit-glass { transform-style: preserve-3d; position: absolute; inset: 8px; border-radius: 55px; border-top-right-radius: 100%; background: linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 100%); transform: translate3d(0px, 0px, 25px); border-left: 1px solid white; border-bottom: 1px solid white; transition: all 0.5s ease-in-out; }
.smit-content { padding: 100px 60px 0px 30px; transform: translate3d(0, 0, 26px); }
.smit-title { display: block; color: #00894d; font-weight: 900; font-size: 20px; }
.smit-text { display: block; color: rgba(0, 137, 78, 0.76); font-size: 15px; margin-top: 20px; }
.smit-bottom { padding: 10px 12px; transform-style: preserve-3d; position: absolute; bottom: 20px; left: 20px; right: 20px; display: flex; align-items: center; justify-content: space-between; transform: translate3d(0, 0, 26px); }
.smit-btn { background: none; border: none; color: #00c37b; font-weight: bolder; font-size: 12px; cursor: pointer; }
.smit-logo { position: absolute; right: 0; top: 0; transform-style: preserve-3d; }
.smit-circle { display: block; position: absolute; aspect-ratio: 1; border-radius: 50%; top: 0; right: 0; box-shadow: rgba(100, 100, 111, 0.2) -10px 10px 20px 0px; backdrop-filter: blur(5px); background: rgba(0, 249, 203, 0.2); transition: all 0.5s ease-in-out; }
.smit-logo .c1 { width: 170px; transform: translate3d(0, 0, 20px); top: 8px; right: 8px; }
.smit-logo .c2 { width: 140px; transform: translate3d(0, 0, 40px); top: 10px; right: 10px; backdrop-filter: blur(1px); transition-delay: 0.4s; }
.smit-logo .c3 { width: 110px; transform: translate3d(0, 0, 60px); top: 17px; right: 17px; transition-delay: 0.8s; }
.smit-logo .c4 { width: 80px; transform: translate3d(0, 0, 80px); top: 23px; right: 23px; transition-delay: 1.2s; }
.smit-logo .c5 { width: 50px; transform: translate3d(0, 0, 100px); top: 30px; right: 30px; display: grid; place-content: center; transition-delay: 1.6s; }
.smit-parent:hover .smit-card { transform: rotate3d(1, 1, 0, 30deg); box-shadow: rgba(5, 71, 17, 0.3) 30px 50px 25px -40px, rgba(5, 71, 17, 0.1) 0px 25px 30px 0px; }
.smit-parent:hover .smit-card .c2 { transform: translate3d(0, 0, 60px); }
.smit-parent:hover .smit-card .c3 { transform: translate3d(0, 0, 80px); }
.smit-parent:hover .smit-card .c4 { transform: translate3d(0, 0, 100px); }
.smit-parent:hover .smit-card .c5 { transform: translate3d(0, 0, 120px); }

/* ----------------------------------------------------
   12. 3D Red Switch - Nawsome
   ---------------------------------------------------- */
.nawsome-switch { display: block; background-color: black; width: 150px; height: 195px; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black; border-radius: 5px; padding: 20px; perspective: 700px; transform: scale(0.8); }
.nawsome-switch input { display: none; }
.nawsome-switch input:checked + .nawsome-button { transform: translateZ(20px) rotateX(25deg); box-shadow: 0 -10px 20px #ff1818; }
.nawsome-switch input:checked + .nawsome-button .nawsome-light { animation: flicker 0.2s infinite 0.3s; }
.nawsome-switch input:checked + .nawsome-button .nawsome-shine { opacity: 1; }
.nawsome-switch input:checked + .nawsome-button .nawsome-shadow { opacity: 0; }
.nawsome-button { display: block; transition: all 0.3s cubic-bezier(1, 0, 1, 1); transform-origin: center center -20px; transform: translateZ(20px) rotateX(-25deg); transform-style: preserve-3d; background-color: #9b0621; height: 100%; position: relative; cursor: pointer; background: linear-gradient(#980000 0%, #6f0000 30%, #6f0000 70%, #980000 100%); background-repeat: no-repeat; }
.nawsome-button::before { content: ""; background: linear-gradient(rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0.3) 30%, #650000 75%, #320000) 50% 50%/97% 97%, #b10000; background-repeat: no-repeat; width: 100%; height: 50px; transform-origin: top; transform: rotateX(-90deg); position: absolute; top: 0; }
.nawsome-button::after { content: ""; background-image: linear-gradient(#650000, #320000); width: 100%; height: 50px; transform-origin: top; transform: translateY(50px) rotateX(-90deg); position: absolute; bottom: 0; box-shadow: 0 50px 8px 0px black, 0 80px 20px 0px rgba(0, 0, 0, 0.5); }
.nawsome-light { opacity: 0; animation: light-off 1s; position: absolute; width: 100%; height: 100%; background-image: radial-gradient(#ffc97e, #ff1818 40%, transparent 70%); }
.nawsome-dots { position: absolute; width: 100%; height: 100%; background-image: radial-gradient(transparent 30%, rgba(101, 0, 0, 0.7) 70%); background-size: 10px 10px; }
.nawsome-characters { position: absolute; width: 100%; height: 100%; background: linear-gradient(white, white) 50% 20%/5% 20%, radial-gradient(circle, transparent 50%, white 52%, white 70%, transparent 72%) 50% 80%/33% 25%; background-repeat: no-repeat; }
.nawsome-shine { transition: all 0.3s cubic-bezier(1, 0, 1, 1); opacity: 0.3; position: absolute; width: 100%; height: 100%; background: linear-gradient(white, transparent 3%) 50% 50%/97% 97%, linear-gradient(rgba(255, 255, 255, 0.5), transparent 50%, transparent 80%, rgba(255, 255, 255, 0.5)) 50% 50%/97% 97%; background-repeat: no-repeat; }
.nawsome-shadow { transition: all 0.3s cubic-bezier(1, 0, 1, 1); opacity: 1; position: absolute; width: 100%; height: 100%; background: linear-gradient(transparent 70%, rgba(0, 0, 0, 0.8)); background-repeat: no-repeat; }

@keyframes flicker { 0% { opacity: 1; } 80% { opacity: 0.8; } 100% { opacity: 1; } }
@keyframes light-off { 0% { opacity: 1; } 80% { opacity: 0; } }