/* ===== FlashCards ===== */

.fc-container {
  max-width: 980px;
  margin: 2rem auto;
  padding: 0 1rem 2rem;
}

.fc-container h1 {
  text-align: center;
  margin: 70px 0 1rem; /* topo fixo em 70px */
  color: var(--secondary); /* azul da identidade */
}

/* área de estudo */
.fc-study {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  box-shadow: var(--shadow);
}

.fc-toolbar {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: .75rem;
}

.fc-toolbar button {
  padding: .55rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.fc-toolbar button:hover { background: color-mix(in srgb, var(--card) 90%, var(--primary)); }
.fc-toolbar .primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.fc-toolbar .primary:hover { filter: brightness(0.95); }
.fc-toolbar .success { background: var(--green, #4caf50); color: #fff; border-color: var(--green, #4caf50); }
.fc-toolbar .danger  { background: var(--danger, #b94c4c); color: #fff; border-color: var(--danger, #b94c4c); }

.fc-card {
  position: relative;
  perspective: 1000px;
  height: clamp(220px, 42vh, 360px);
  background: transparent;
  margin: .5rem auto;
  max-width: 720px;
  border-radius: 16px;
}

.fc-face {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transition: transform .5s ease;
  font-size: clamp(1rem, 2.2vw, 1.35rem);
  text-align: center;
}

.fc-front { }
.fc-back  { transform: rotateY(180deg); }

.fc-card.is-flipped .fc-front { transform: rotateY(180deg); }
.fc-card.is-flipped .fc-back  { transform: rotateY(360deg); }

.fc-meta {
  display: flex;
  justify-content: space-between;
  max-width: 720px;
  margin: .5rem auto 0;
  color: color-mix(in srgb, var(--text) 75%, var(--border));
  font-weight: 600;
}

/* Criar cartões */
.fc-create {
  margin-top: 2rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
}

.fc-create h2,
.fc-io h2 { margin-top: 0; color: var(--primary); }

#fc-form label { display: block; font-weight: 600; margin: .5rem 0; }
#fc-form textarea {
  width: 100%;
  min-height: 70px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .7rem;
  resize: vertical;
  font: inherit;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  color: var(--text);
}
.fc-actions { display: flex; gap: .6rem; margin-top: .6rem; }

.fc-actions .primary {
  background: var(--primary); color: #fff; border: 1px solid var(--primary);
  padding: .55rem 1rem; border-radius: 10px; cursor: pointer; font-weight: 700;
}
.fc-actions .ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: .55rem 1rem; border-radius: 10px; cursor: pointer; font-weight: 600;
}

/* Importar/Exportar */
.fc-io {
  margin-top: 1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
}
.fc-io-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.fc-io button {
  padding: .5rem .9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.fc-io button:hover {
  background: color-mix(in srgb, var(--card) 88%, var(--primary));
}
.fc-io textarea {
  width: 100%;
  min-height: 120px;
  margin-top: .5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .6rem .7rem;
  resize: vertical;
  font: inherit;
  background: color-mix(in srgb, var(--card) 95%, transparent);
  color: var(--text);
}

/* Responsivo */
@media (max-width: 720px) {
  .fc-io-grid { grid-template-columns: 1fr; }
  .fc-meta { padding: 0 .25rem; }
}