* { 
  margin:0; 
  padding:0; 
  box-sizing:border-box; 
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

body {
  background: url('https://www.jkpi.org/wp-content/uploads/2023/08/971650884019.jpg') no-repeat center center fixed;
  background-size: cover;
  color:#fff;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

header { 
  text-align:center; 
  padding:2rem 1rem; 
  background: rgba(194, 210, 51, 0.8); 
  color:#fff;
}
header h1 { 
  font-size:2rem; margin-bottom:0.5rem; 
}

main {
   flex:1; 
   display:flex; 
   flex-direction:column; 
   align-items:center; 
   padding:2rem 1rem; 
  }

#otherInput {
      display: none; /* Hidden by default */
    }

.analyze-section {
  background: rgba(255,255,255,0.1);
  padding:1rem 2rem;
  border-radius:10px;
  text-align:center;
  margin-bottom:1.5rem;
  width:90%;
  max-width:500px;
  backdrop-filter: blur(8px);
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
}

.input-group { 
  display:flex; 
  justify-content:center; 
  margin-top:0.5rem; 
  gap:0.5rem; 
  flex-wrap:wrap;
}
select, button {
   padding:0.5rem; 
   border-radius:6px; 
   border:none; 
   font-size:1rem; 
  }
button {
   background: #4682b4; 
   color:#fff; 
   cursor:pointer; 
   transition:0.3s; 
  }
button:hover {
   background:#36648b; 
  }

.loader {
   display:none; 
   flex-direction:column; 
   align-items:center; 
   margin:1rem; 
  }
.spinner {
  width:50px; height:50px;
  border:5px solid rgba(0,0,0,0.1);
  border-top:5px solid #4682b4;
  border-radius:50%;
  animation: spin 1s linear infinite, glow 2s ease-in-out infinite;
  margin-bottom:0.5rem;
}
@keyframes spin {
   to { transform: rotate(360deg); } 
  }
@keyframes glow { 0%,100% { box-shadow:0 0 5px #4682b4;} 50% { box-shadow:0 0 20px #4682b4;} }

.result-card {
  background: rgba(255,255,255,0.2);
  padding:1rem;
  border-radius:10px;
  max-width:600px;
  width:90%;
  animation: fadeIn 0.5s ease;
  backdrop-filter: blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  margin-top:1rem;
}
.result-card.hidden { display:none; }

.result-card table { width:100%; border-collapse:collapse; margin-top:0.5rem; }
.result-card td { padding:0.5rem; border-bottom:1px solid rgba(255,255,255,0.3); }

footer { text-align:center; padding:1rem; font-size:0.9rem; background: rgba(255,255,255,0.1); color:white; backdrop-filter: blur(8px); }

@keyframes fadeIn { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:translateY(0);} }