:root {

--lockdown-red: #ef4444;

--bright-white: #ffffff;

--dark-panel: rgba(255, 255, 255, 0.1);

--white-glow: rgba(255, 255, 255, 0.75);

}

  

body {

font-family: 'Oxanium', sans-serif;

background-color: #000;

color: var(--bright-white);

}

  

.ui-panel {

background-color: var(--dark-panel);

border: 1px solid rgba(255, 255, 255, 0.6);

box-shadow: 0 0 25px rgba(0,0,0,0.5);

animation: fadeIn 1s ease-out;

backdrop-filter: blur(12px);

}

@keyframes fadeIn {

from { opacity: 0; transform: scale(0.98); }

to { opacity: 1; transform: scale(1); }

}

  

.glitch {

position: relative;

text-shadow: 0 0 8px var(--white-glow);

animation: glitch-skew 1.5s infinite linear alternate-reverse;

}

.glitch::before,

.glitch::after {

content: attr(data-text);

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: var(--dark-panel);

clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

}

.glitch::before {

left: 2px;

text-shadow: -1px 0 var(--lockdown-red);

animation: glitch-anim-1 1.5s infinite linear alternate-reverse;

}

.glitch::after {

left: -2px;

text-shadow: -1px 0 #00fff9, 2px 2px var(--lockdown-red);

animation: glitch-anim-2 1.5s infinite linear alternate-reverse;

}

@keyframes glitch-anim-1 { 0%, 100% { clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%) } 25%, 50% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } 75% { clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%) } }

@keyframes glitch-anim-2 { 0%, 100% { clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%) } 33% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) } 66% { clip-path: polygon(0 80%, 100% 80%, 100% 95%, 0 95%) } }

@keyframes glitch-skew { 5% { transform: skew(1deg) } 10% { transform: skew(0) } }

  

/* ADDED: Styles for the tab buttons to match the site theme */

.class-btn {

border: 1px solid rgba(255, 255, 255, 0.5);

color: rgba(255, 255, 255, 0.8);

transition: all 0.2s ease-in-out;

border-radius: 0; /* Match the sharp, angular look */

background-color: transparent;

}

.class-btn:hover {

background-color: rgba(255, 255, 255, 0.1);

border-color: var(--bright-white);

color: var(--bright-white);

}

.active-class-btn {

background-color: var(--bright-white);

border-color: var(--bright-white);

color: var(--lockdown-red);

box-shadow: 0 0 15px var(--white-glow);

}