[data-theme="dark"],:root{
  --bg-color:#121212;
  --text-color:#ffffff;
  --surface:#111;
  --text:var(--text-color);
  --bg:var(--bg-color);
  --primary:#ff7e5f;
  --primary-dark:#ff9478;
  --accent:#4e9cff;
  --bg-card:#ffffff;
  --text-card:#000000;
  --bar-bg:#e0e0e0;
  --bar-fill:#333333;
  --accent-light:#4F86F7;
  --accent-dark:#4FD8FF;
  --bg-alpha:rgba(255,255,255,0.6);
  --bg-alpha-d:rgba(0,0,0,0.6);
  --bg-gradient:linear-gradient(135deg,#2a2a2a,#000000);
  --container-bg:var(--bg-alpha-d);
}
[data-theme="light"]{
  --bg-color:#ffffff;
  --text-color:#000000;
  --surface:#ffffff;
  --bg-card:#ffffff;
  --text-card:#000000;
  --bar-bg:#e0e0e0;
  --bar-fill:#333333;
  --bg-gradient:linear-gradient(135deg,#f3f9ff,#dbe7ff);
  --container-bg:var(--bg-alpha);
}
[data-theme="dark"]{
  --bg-card:#1e1e1e;
  --text-card:#f0f0f0;
  --bar-bg:#444444;
  --bar-fill:#76c7c0;
  --bg-gradient:linear-gradient(135deg,#2a2a2a,#000000);
  --container-bg:var(--bg-alpha-d);
}
html,body{
  margin:0;
  padding:0;
  font-family:'Poppins',sans-serif;
  background:var(--bg-gradient);
  color:var(--text-color);
  scroll-behavior:smooth;
  transition:background 0.3s,color 0.3s;
}
button{
  padding:0.75rem 2rem;
  border:none;
  border-radius:4px;
  background:var(--primary);
  color:#fff;
  cursor:pointer;
  transition:background 0.3s,transform 0.2s;
}
button:hover{background:var(--primary-dark);transform:scale(1.03);}
button:disabled{opacity:0.6;cursor:not-allowed;}
.container{max-width:800px;margin:0 auto;padding:2rem;background-color:var(--container-bg);}
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;background:url('../img/homepage_image.png') center 80%/cover no-repeat;position:relative;text-align:center;color:var(--text-color);}
.hero::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,0.5);}
.hero-content{position:relative;z-index:1;}
.hero h1{font-size:3rem;margin-bottom:2rem;font-weight:700;}
.hero select{padding:0.5rem 1rem;border:none;border-radius:4px;margin-bottom:1rem;}
.card{background-color:var(--bg-card);color:var(--text-card);padding:2rem;border-radius:8px;box-shadow:0 4px 10px rgba(0,0,0,0.5);margin-bottom:2rem;transition:transform 0.3s;}
.card.shake{animation:shake 0.4s ease;}
@keyframes shake{0%,100%{transform:translateX(0);}20%,60%{transform:translateX(-6px);}40%,80%{transform:translateX(6px);}}
.scale label{margin-right:1rem;display:inline-block;margin-bottom:0.5rem;}
.progress{height:8px;background:var(--surface);border-radius:4px;overflow:hidden;margin-bottom:1rem;}
.progress-bar{height:100%;background:var(--accent);width:0;transition:width 0.3s;}
.result-bar{height:10px;background-color:var(--bar-bg);border-radius:5px;overflow:hidden;margin:0.5rem 0;}
.result-bar span{display:block;height:100%;background-color:var(--bar-fill);width:0;transition:width 0.5s;}
.theme-toggle{position:absolute;top:1rem;right:1rem;z-index:2;}

/* Result page layout */
.result-section{
  background-color:var(--bg-card);
  color:var(--text-card);
  border-radius:12px;
  padding:20px 24px;
  margin-bottom:24px;
  box-shadow:0 4px 8px rgba(0,0,0,0.05);
}
.result-section h3{
  margin-top:0;
  font-size:1.25rem;
}
#details>div{margin-bottom:16px;background-color:var(--bg-card);color:var(--text-card);padding:12px;border-radius:8px;}
#resultList section{background-color:var(--bg-card);color:var(--text-card);padding:12px;border-radius:8px;margin-bottom:16px;}

#fullDesc{display:grid;grid-template-columns:1fr;gap:24px;}
@media (min-width:768px){
  #fullDesc{grid-template-columns:repeat(2,1fr);}
}

#retry-btn{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  padding:0.75rem 1.5rem;
  background-color:#4F86F7;
  color:white;
  border:none;
  border-radius:4px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
#retry-btn:hover{opacity:0.9;}

#retry-btn{
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  padding:0.75rem 1.5rem;
  background-color:#4F86F7;
  color:white;
  border:none;
  border-radius:4px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
#retry-btn:hover{opacity:0.9;}

#title{
  font-size:2.5rem;
  font-weight:700;
  display:inline-block;
  padding:0.5rem 1rem;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
  position:relative;
  background:none;
  border:none;
  color:var(--text-color);
  transition:color 0.3s,background 0.3s,box-shadow 0.3s;
}

#title:hover{
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transform:translateY(-2px);
}