/* styles.css */
:root {
  --primary-color: #1a73e8;
  --secondary-color: #1557a0;
  --background-color: #f4f4f9;
  --accent-color: #ff6f61;
  --progress: 0%;
}

* { box-sizing: border-box; }

body {
  margin: 0; padding: 0;
  font-family: Arial, sans-serif;
  background: var(--background-color);
  display: flex; flex-direction: column; align-items: center;
}

.ad {
  width: 100%; height: 100px;
  background: #ddd; text-align: center;
  line-height: 100px; font-size: 1.2em; color: #555;
  margin: 10px 0;
}

.container {
  background: #fff; padding: 20px; margin: 20px;
  border-radius: 15px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  max-width: 800px; width: 90%;
  animation: fadeIn 1s ease-in-out;
}

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

.header {
  background: var(--primary-color); color: #fff;
  padding: 15px; text-align: center;
  border-radius: 15px 15px 0 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

h1 { margin: 0; font-size: 2em; }

.tabs { display: flex; justify-content: center; margin: 20px 0; }

.tab {
  padding: 10px 20px; margin: 0 5px;
  background: #ddd; border: none; border-radius: 5px;
  cursor: pointer; transition: background .3s, transform .2s;
}

.tab.active,
.tab:hover {
  background: var(--primary-color); color: #fff;
  transform: translateY(-2px);
}

.tab-content { display: none; animation: fadeIn .5s ease; }
.tab-content.active { display: block; }

.question {
  background: #f9f9f9; padding: 15px; margin-bottom: 20px;
  border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.progress-bar {
  position: relative; height: 10px; background: #ddd;
  border-radius: 5px; margin: 10px 0; overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: var(--progress);
  background: var(--accent-color);
  transition: width .3s ease;
}

button {
  padding: 10px 20px; margin: 10px 5px 0 0;
  background: var(--primary-color); color: #fff;
  border: none; border-radius: 5px; cursor: pointer;
  font-size: 1em; transition: background .3s, transform .2s;
}
button:hover { background: var(--secondary-color); transform: translateY(-2px); }

.result { margin-top: 20px; text-align: justify; }
.correct-answer { color: green; font-weight: bold; }
.wrong-answer   { color: red;   font-weight: bold; }

@media (max-width: 600px) {
  body { font-size: 14px; }
  .container { margin: 10px; padding: 15px; }
  .ad { height: 80px; line-height: 80px; }
}