.quiz-format-selector {display: flex; align-items: center; justify-content: center; margin-bottom: 30px; gap: 15px; flex-wrap: wrap; background-color: var(--background); padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05)}.format-label {margin: 0; font-weight: 600; color: var(--text-primary)}.format-button {background-color: var(--background); border: 2px solid var(--border-color); color: var(--text-primary); padding: 10px 20px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; min-width: 140px; text-align: center}.format-button:hover {background-color: var(--border-color); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1)}.format-button.active {background-color: var(--primary-blue); color: white; border-color: var(--primary-blue); box-shadow: 0 4px 12px rgba(59,113,202,0.2)}.flashcard-container {width: 100%; max-width: 700px; margin: 0 auto; padding: 20px; background-color: var(--card-background); border-radius: 12px; box-shadow: 0 6px 18px rgba(0,0,0,0.1)}.flashcard-navigation {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; padding: 10px 0; border-bottom: 2px solid var(--border-color)}.flashcard-nav-btn {background-color: var(--primary-blue); color: white; border: none; padding: 12px 20px; border-radius: 30px; cursor: pointer; transition: all 0.3s ease; font-weight: 600; min-width: 120px; text-align: center; box-shadow: 0 4px 6px rgba(59,113,202,0.2)}.flashcard-nav-btn:hover {background-color: var(--primary-blue-dark); transform: translateY(-2px); box-shadow: 0 6px 12px rgba(59,113,202,0.3)}.flashcard-nav-btn:active {transform: translateY(1px)}.flashcard-counter {font-weight: 700; font-size: 18px; color: var(--text-secondary); background-color: var(--background); padding: 8px 16px; border-radius: 20px; min-width: 80px; text-align: center}.flashcard-display {perspective: 1500px; height: 350px; margin: 20px 0}.flashcard {width: 100%; height: 100%; cursor: pointer; position: relative}.flashcard-inner {position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275); transform-style: preserve-3d; box-shadow: 0 10px 25px rgba(0,0,0,0.15); border-radius: 16px}.flashcard-inner.flipped {transform: rotateY(180deg)}.flashcard-front,.flashcard-back {position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; border-radius: 16px; overflow: hidden}.flashcard-front {background-color: var(--background); border-left: 8px solid var(--primary-blue); box-shadow: inset 0 0 20px rgba(0,0,0,0.05)}.flashcard-back {background-color: var(--light-blue); color: var(--text-primary); border-left: 8px solid var(--primary-blue-dark); transform: rotateY(180deg); box-shadow: inset 0 0 20px rgba(59,113,202,0.1)}.flashcard-front p,.flashcard-back p {margin: 0; font-size: 22px; line-height: 1.6; max-width: 90%}.flashcard-front::after {content: "Click to reveal answer"; position: absolute; bottom: 15px; font-size: 14px; color: var(--text-light); font-style: italic}.flashcard-back::after {content: "Click to see question"; position: absolute; bottom: 15px; font-size: 14px; color: var(--text-secondary); font-style: italic}@keyframes btn-pulse {0% {transform: scale(1)}50% {transform: scale(1.05)}100% {transform: scale(1)}}.btn-pulse {animation: btn-pulse 0.5s ease-in-out}#quiz-content-container {transition: opacity 0.3s ease-in-out}.flashcard-inner {transition: transform 0.6s cubic-bezier(0.175,0.885,0.32,1.275)}.flashcard:hover .flashcard-inner:not(.flipped) {box-shadow: 0 15px 30px rgba(0,0,0,0.2); transform: translateY(-5px)}@media (max-width: 768px) {.flashcard-container {max-width: 100%; padding: 15px; margin-top: 10px}.quiz-format-selector {flex-direction: column; padding: 10px}.format-button {width: 100%}.flashcard-navigation {flex-wrap: wrap; gap: 10px}.flashcard-nav-btn {padding: 10px 15px; min-width: 100px; font-size: 14px}.flashcard-counter {order: -1; width: 100%; margin-bottom: 10px}.flashcard-display {height: 280px}.flashcard-front,.flashcard-back {padding: 20px 15px}.flashcard-front p,.flashcard-back p {font-size: 18px}.flashcard-front::after,.flashcard-back::after {font-size: 12px}}