#flashcard-app {
    max-width: 480px;
    margin: 0 auto;
    padding: 16px;
    font-family: sans-serif;
    text-align: center;
}
.fc-progress { color: #888; margin-bottom: 4px; }
.fc-score    { font-size: 1.1em; margin-bottom: 16px; }

.fc-card {
    width: 100%;
    height: 240px;
    perspective: 1000px;
    cursor: pointer;
    margin-bottom: 24px;
}
.fc-inner {
    width: 100%; height: 100%;
    position: relative;
    transition: transform 0.5s;
    transform-style: preserve-3d;
}
.fc-card.flipped .fc-inner {
    transform: rotateY(180deg);
}
.fc-front, .fc-back {
    position: absolute; width: 100%; height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 24px; box-sizing: border-box;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.fc-front { background: #fff; }
.fc-back  { background: #f0f9ff; transform: rotateY(180deg); }
.fc-main  { font-size: 2em; font-weight: bold; margin-bottom: 8px; }
.fc-sub   { font-size: 1em; color: #666; margin-bottom: 8px; }
.fc-hint  { font-size: 0.8em; color: #aaa; }
.fc-example { font-size: 0.85em; color: #555; margin-top: 6px; }

.fc-buttons { display: flex; gap: 12px; justify-content: center; }
.fc-btn {
    padding: 12px 28px; border: none; border-radius: 24px;
    font-size: 1em; cursor: pointer; font-weight: bold;
}
.fc-btn.flip    { background: #3b82f6; color: #fff; width: 100%; }
.fc-btn.correct { background: #22c55e; color: #fff; }
.fc-btn.wrong   { background: #ef4444; color: #fff; }
.fc-result { padding: 40px 0; }
.fc-result h2 { font-size: 2em; }
.fc-result p  { font-size: 1.2em; margin: 8px 0; }
.fc-loading { color: #aaa; padding: 40px; }
.fc-reading {
    font-size: 0.8em;
    color: #888;
    margin-top: 4px;
    font-style: italic;
}