:root{
  --prime: #00f2ff;
  --second: #ff00c1;
  --bg-dark: #0d0f18;
  --bg-card: rgba(29, 32, 47, 0.55);
  --text: #e0e6f0;
  --text-dim: #8a93b5;
  --glow: 0 0 12px var(--prime), 0 0 20px var(--second);
  --shadow: 0 8px 32px rgba(0,0,0,.36);
  --r: 12px;
  --t: .3s ease;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: system-ui,sans-serif;
  background: var(--bg-dark) url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%231d202f' fill-opacity='.4'%3E%3Cpath d='M0 0h20v20H0z'/%3E%3C/g%3E%3C/svg%3E");
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#footer-copyright {
  position: relative;
  display: inline-block;
  letter-spacing: 0.05em; 
  padding-left: 1em;     
}

#footer-copyright::after {
  content: '_';
  position: absolute;
  right: -15px;
  bottom: -2px;
  color: #00f2ff;
  font-size: 1.2rem;
  animation: footer-blink 1s infinite;
}

@keyframes footer-blink {
  50% { opacity: 0; }
}

#boot{position:fixed;inset:0;background:#000;z-index:9999;font-family:"Menlo","Monaco","Consolas","Courier New",monospace}
.stage{                    
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:55vw; height:45vh;   
}
#boot .term{
  font-size: 0.95rem;
  line-height:1.4;
  color:#39ff14;
  letter-spacing:.02em;
  white-space:pre
}
#boot .line{
  min-height:1.4em;
  position:relative
}
.cursor{                   
  display:none;
}
.line.active .cursor{      
  display:inline;
  animation:blink 1s steps(2,start) infinite;
}
.cursor{display:inline-block;animation:blink 1s steps(2,start) infinite}
@keyframes blink{50%{opacity:0}}


.navbar{
  position: fixed;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1.25rem;
  background: rgba(13,15,24,.75);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,242,255,.18);
  z-index: 1000;
}
.site-title{
  white-space: nowrap;
  min-width: 95px;
  font-size: 1.2rem;
  font-weight: 800;
  background: linear-gradient(90deg,var(--prime),var(--second));
  
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.navbar ul{
  list-style: none;
  display: flex;
  margin-right: 100px;
  gap: 1.25rem;
}
.navbar a{
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--t);
  position: relative;
}
.navbar a:hover{color:var(--prime)}
.navbar a::after{
  content:'';
  position:absolute;
  left:0;bottom:-4px;
  width:0;height:2px;
  background:var(--prime);
  transition:width var(--t);
}
.navbar a:hover::after{width:100%}
.navbar li {
    margin: 0 25px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #333;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white; 
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #444;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.validator-container{
  width:90%;max-width:900px;
  margin: auto;
  background: var(--bg-card);
  backdrop-filter: blur(16px);
  border:1px solid rgba(0,242,255,.18);
  border-radius:var(--r);
  box-shadow:var(--shadow),var(--glow);
  padding:2.5rem 2rem;
  animation:fadeIn .8s ease-out;
}
@keyframes fadeIn{from{opacity:0;transform:translateY(30px)}}

.validator-container h1{
  display:flex;align-items:center;justify-content:center;
  gap:.75rem;
  font-size:2rem;
  margin-bottom:1.75rem;
}
.title-gif{width:50px;height:50px}

select {
  background: var(--bg-card);
  border-radius: var(--r);
  border: 1px solid rgba(0,242,255,.25);
}

option {
  background: var(--bg-dark);
  color: var(--text-dim);
  padding: 8px 12px;
  font-size: 0.95rem;
}

option:hover {
  background: rgba(0,242,255,.1) !important;
  color: var(--prime);
}

#result{margin-top:1.25rem}
.success,.error{
  padding:1rem 1.25rem;
  border-radius:var(--r);
  font-weight:600;
  animation:slideUp .4s ease-out;
}
.success{background:rgba(0,242,255,.12);color:var(--prime);border-left:4px solid var(--prime)}
.error{background:rgba(255,0,193,.12);color:var(--second);border-left:4px solid var(--second)}
@keyframes slideUp{from{opacity:0;transform:translateY(15px)}}

.problem-container{
  width:90%;max-width:1000px;
  margin:6rem auto 3rem;
  display:flex;flex-direction:column;gap:2rem;
}
.category-card{
  background:var(--bg-card);
  backdrop-filter: blur(16px);
  border:1px solid rgba(0,242,255,.15);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform var(--t),box-shadow var(--t);
}
.category-card:hover{transform:translateY(-5px);box-shadow:var(--shadow),var(--glow)}
.category-header{
  padding:1rem 1.5rem;
  background:rgba(0,242,255,.08);
  font-weight:700;font-size:1.1rem;
}

.problem-list{padding:.75rem;display:flex;flex-direction:column;gap:.5rem}
.problem-item{
  display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1rem;
  border-radius:calc(var(--r)/2);
  transition:background var(--t);
}
.problem-item:hover{background:rgba(0,242,255,.06)}
.problem-info::before{   
  content:'🏴';
  font-size:1.3rem;
  filter:drop-shadow(0 0 4px var(--prime));
  transition:transform .3s;
}
.problem-item:hover .problem-info::before{
  transform:rotate(-15deg) scale(1.15);
  filter:drop-shadow(0 0 8px var(--second));
}

.problem-info h3{
  font-size:1.05rem;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--text);
  background:linear-gradient(90deg,var(--prime) 0%, var(--second) 100%);
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 2px rgba(0,242,255,.25);
}

.problem-info p{
  font-size:.9rem;
  background:linear-gradient(90deg,var(--text-dim) 0%, var(--prime) 100%);
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-top:.15rem;
}
.download-link{
  padding:.4rem .9rem;
  background:rgba(0,242,255,.12);
  color:var(--prime);
  border-radius:calc(var(--r)/2);
  text-decoration:none;
  font-size:.85rem;
  transition:background var(--t),color var(--t);
}
.download-link:hover{background:var(--prime);color:var(--bg-dark)}

.admin-navbar{border-bottom-color:rgba(255,0,193,.25)}
.admin-badge{color:var(--second);text-shadow:0 0 6px var(--second)}
.admin-btn{background:linear-gradient(90deg,var(--second),#ff4dff)}
.admin-mode-text{
  position:fixed;top:1rem;right:1rem;
  z-index: 1001;
  padding:.4rem .8rem;
  background:rgba(255,0,193,.9);
  color:#0d0f18;
  font-weight:700;border-radius:calc(var(--r)/2);
  animation:adminPulse 1.5s infinite;
}
@keyframes adminPulse{50%{box-shadow:0 0 15px var(--second)}}

@media(max-width:768px){
  .navbar ul{flex-direction:column;gap:.5rem}
  .validator-container{margin:7rem 1rem 2rem;padding:2rem 1.5rem}
  .input-group{flex-direction:column}
  .problem-item{flex-direction: column;align-items:flex-start;gap:.75rem}
}

.problem-item{position:relative;overflow:hidden}
.problem-item::before{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(0,242,255,.2),transparent);transition:left .6s}
.problem-item:hover::before{left:150%}

#userInput{
  background:linear-gradient(90deg,rgba(0,242,255,.1) 0%, rgba(0,242,255,.3) 50%, rgba(0,242,255,.1) 100%);
  background-size:200% 100%;
  animation:charge 2s linear infinite;
}
@keyframes charge{to{background-position:200% 0}}

#userInput:focus {
  background: linear-gradient(to bottom, rgba(0,242,255,0.05) 0%, rgba(0,242,255,0.15) 50%, rgba(0,242,255,0.05) 100%);
  background-size: 100% 4px;
  background-position: 0 0;
  animation: scanline 1.5s linear infinite;
}
@keyframes scanline {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

.problem-item{
  transform-style:preserve-3d;
  transition:transform .3s;
}
.problem-item:hover{
  transform:translateZ(20px) rotateY(5deg);
  box-shadow:0 0 20px rgba(0,242,255,.6),0 0 40px rgba(0,242,255,.3);
}


#particles-js{                      
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.problem-scroll-wrapper{            
    position: relative;             
    max-height: calc(100vh - 70px); 
    overflow-y: auto;               
    -webkit-overflow-scrolling: touch;
    padding-top: 1rem;              
}

footer.footer{
    position: relative;
    z-index: 1;
}