/**
 * Todo o visual usa variáveis CSS. Os valores padrão (fallback) são os azuis
 * originais do plugin — mas o frontend-study.js detecta as cores REAIS do tema
 * do site (links, fundo, texto) e preenche as variáveis, então na prática o
 * flashcard "veste" a identidade do site automaticamente, até em tema escuro.
 *
 *   --fc-accent        cor de destaque (herda a cor dos links do tema)
 *   --fc-accent-dark   variação escura do destaque (degradês/hover)
 *   --fc-accent-text   texto legível sobre o destaque
 *   --fc-surface       fundo dos cartões/painéis
 *   --fc-surface-2     superfície secundária (frente do card, chips)
 *   --fc-text          cor do texto (herda do body)
 *   --fc-border        bordas sutis
 *   --fc-shadow        sombra dos cartões
 *   --fc-radius        raio de borda
 *
 * Cores PESSOAIS do membro (opcionais, salvas no perfil) sobrepõem só as faces:
 *   --fc-card-front-a/b, --fc-card-front-text, --fc-card-back-a/b, --fc-card-back-text
 */

.fc-deck-container,
.fc-repo,
.fc-theme-panel {
	font-family: inherit;
	color: var(--fc-text, #222);
}

/* ====== Container do baralho (estudo) ====== */
.fc-deck-container {
	max-width: 500px;
	margin: 24px auto;
	padding: 22px 22px 24px;
	border-radius: calc(var(--fc-radius, 10px) + 4px);
	background: var(--fc-surface, #fff);
	box-shadow: var(--fc-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
	text-align: center;
}



.fc-topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 16px;
	position: relative; /* âncora do balãozinho do disquete */
}

.fc-session-bar {
	flex: 1;
	height: 14px;
	background: var(--fc-surface-2, #eef0f3);
	border-radius: 999px;
	overflow: hidden;
}

.fc-session-bar span {
	display: block;
	position: relative;
	height: 100%;
	min-width: 14px;
	background: var(--fc-accent, #2271b1);
	border-radius: 999px;
	transition: width 0.35s ease;
}

/* O "brilho" — a faixinha clara em cima da barra, assinatura do Duolingo. */
.fc-session-bar span::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 8px;
	right: 8px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.35);
}

.fc-session-count {
	font-size: 11px;
	font-weight: 600;
	opacity: 0.5;
	white-space: nowrap;
}

.fc-session-count em {
	font-style: normal;
	opacity: 0.8;
}

.fc-loading {
	opacity: 0.7;
}

/* ====== O flashcard ====== */
.fc-flashcard {
	perspective: 1200px;
	height: 230px;
	cursor: pointer;
	margin-bottom: 16px;
}

.fc-flashcard-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.5s;
	transform-style: preserve-3d;
}

.fc-flashcard.is-flipped .fc-flashcard-inner {
	transform: rotateY(180deg);
}

/* Entrada suave de cada card novo da sessão */
.fc-card-enter .fc-flashcard-inner {
	animation: fc-card-in 0.35s ease;
}

@keyframes fc-card-in {
	from { opacity: 0; transform: translateY(14px) scale(0.98); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.fc-flashcard-face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.55;
	overflow-y: auto;
	border: 2px solid var(--fc-border, rgba(0, 0, 0, 0.08));
}

.fc-flashcard-front {
	background: linear-gradient(
		135deg,
		var(--fc-card-front-a, var(--fc-surface-2, #eef2f7)),
		var(--fc-card-front-b, var(--fc-surface, #f8fafc))
	);
	color: var(--fc-card-front-text, var(--fc-text, #222));
}

.fc-flashcard-back {
	background: linear-gradient(
		135deg,
		var(--fc-card-back-a, var(--fc-accent, #2271b1)),
		var(--fc-card-back-b, var(--fc-accent-dark, #1a5686))
	);
	color: var(--fc-card-back-text, var(--fc-accent-text, #fff));
	transform: rotateY(180deg);
}

/* Tela final: número grande, zero blá-blá-blá. */
.fc-done-big {
	font-size: 26px;
	font-weight: 800;
	margin: 0;
}

.fc-btn-flip {
	min-width: 200px;
}

/* ====== Botões ====== */
.fc-actions {
	display: flex;
	gap: 10px;
	justify-content: center;
}

/* Botões no estilo Duolingo: gorduchos, cantos bem redondos, um "degrau"
   sólido embaixo (box-shadow 0 4px 0) e o clique que AFUNDA o botão —
   translateY(4px) + degrau some. Divertido e tátil. */
.fc-btn {
	padding: 13px 24px;
	border-radius: 14px;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	letter-spacing: 0.02em;
	text-decoration: none;
	display: inline-block;
	box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
	transition: filter 0.15s ease, transform 0.08s ease, box-shadow 0.08s ease;
}

.fc-btn:hover {
	filter: brightness(1.06);
	transform: none;
}

.fc-btn:active {
	transform: translateY(4px);
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* "Sabia!": verde sólido com degrau verde-escuro — o botão de acerto clássico. */
.fc-btn-right {
	background: #2e8b3d;
	color: #fff;
	box-shadow: 0 4px 0 #1f6a2c;
}

/* "Não sabia": botão secundário neutro (branco, contorno grosso, degrau
   na cor da borda) — padrão Duolingo pra opção secundária. */
.fc-btn-wrong {
	background: var(--fc-surface, #fff);
	color: #a12b2c;
	border: 2px solid var(--fc-border, #d7dbe0);
	box-shadow: 0 4px 0 var(--fc-border, #d7dbe0);
	padding: 11px 22px; /* compensa a borda de 2px */
}

.fc-btn-primary {
	background: var(--fc-accent, #2271b1);
	color: var(--fc-accent-text, #fff);
	box-shadow: 0 4px 0 var(--fc-accent-dark, #1a5686);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 14px;
}

.fc-btn-ghost {
	background: var(--fc-surface, #fff);
	color: var(--fc-text, #222);
	border: 2px solid var(--fc-border, rgba(0, 0, 0, 0.15));
	box-shadow: 0 4px 0 var(--fc-border, rgba(0, 0, 0, 0.15));
	padding: 11px 22px;
}

.fc-btn-redo {
	background: var(--fc-surface, #fff);
	color: var(--fc-accent, #2271b1);
	border: 2px solid var(--fc-border, rgba(0, 0, 0, 0.15));
	box-shadow: 0 4px 0 var(--fc-border, rgba(0, 0, 0, 0.15));
	padding: 11px 22px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 14px;
}

.fc-btn-redo:hover {
	border-color: var(--fc-accent, #2271b1);
	box-shadow: 0 4px 0 var(--fc-accent, #2271b1);
}

.fc-redo-wrap {
	margin-top: 6px;
}

.fc-all-done {
	padding: 22px 10px 14px;
}

.fc-login-required {
	padding: 20px 0;
}

/* ====== Disquete 💾 — salvar o baralho no perfil ====== */
.fc-save-deck {
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	line-height: 0;
	border-radius: 50%;
	transition: background 0.15s ease, transform 0.15s ease;
}

.fc-save-deck:hover {
	background: var(--fc-surface-2, #eef2f7);
	transform: scale(1.12);
}

.fc-save-deck svg {
	display: block;
}

.fc-save-deck .fc-floppy-body {
	fill: none;
	stroke: var(--fc-text, #55606c);
	stroke-width: 1.7;
	stroke-linejoin: round;
	opacity: 0.55;
	transition: all 0.25s ease;
}

.fc-save-deck .fc-floppy-label,
.fc-save-deck .fc-floppy-shutter {
	fill: none;
	stroke: var(--fc-text, #55606c);
	stroke-width: 1.4;
	opacity: 0.55;
	transition: all 0.25s ease;
}

/* Estado salvo: o disquete "pinta" com a cor de destaque do site */
.fc-save-deck.is-saved .fc-floppy-body {
	fill: var(--fc-accent, #2271b1);
	stroke: var(--fc-accent, #2271b1);
	opacity: 1;
}

.fc-save-deck.is-saved .fc-floppy-label {
	fill: var(--fc-surface, #fff);
	stroke: var(--fc-surface, #fff);
	opacity: 0.95;
}

.fc-save-deck.is-saved .fc-floppy-shutter {
	fill: var(--fc-surface, #fff);
	stroke: var(--fc-surface, #fff);
	opacity: 0.7;
}

/* Animação de "gravando": aperta, gira de leve e volta com bounce */
.fc-save-anim {
	animation: fc-floppy-save 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fc-floppy-save {
	0%   { transform: scale(1); }
	30%  { transform: scale(0.75) rotate(-8deg); }
	60%  { transform: scale(1.25) rotate(5deg); }
	100% { transform: scale(1) rotate(0); }
}

/* Balãozinho de confirmação que sobe do disquete */
.fc-save-chip {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translate(-50%, 6px);
	background: var(--fc-accent, #2271b1);
	color: var(--fc-accent-text, #fff);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 999px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
	z-index: 5;
}

.fc-save-chip.is-visible {
	opacity: 1;
	transform: translate(-50%, -14px);
}

/* ====== Baralhos no final do post ======
   Retângulo padronizado, separado do texto do blog — mesmo cartão de seção
   usado no quiz, na conquista e nos comentários (padrão dos flashcards). */
.fc-post-decks {
	background: var(--fc-surface, #fff);
	border-radius: calc(var(--fc-radius, 10px) + 4px);
	box-shadow: var(--fc-shadow, 0 2px 12px rgba(0, 0, 0, 0.06));
	padding: 22px;
	margin: 28px 0;
}

.fc-post-decks-title {
	text-align: center;
	margin: 0 0 16px;
	font-size: 1.3em;
	line-height: 1.3;
}

/* Dentro do retângulo, o container do baralho não repete cartão em cima de
   cartão: fica transparente e sem sombra própria. */
.fc-post-decks .fc-deck-container {
	background: transparent;
	box-shadow: none;
	padding: 0;
	margin: 0 auto;
}

/* ====== Repositório de flashcards ====== */
.fc-repo {
	max-width: 900px;
	margin: 20px auto;
}

.fc-repo-toolbar {
	margin-bottom: 14px;
}

.fc-repo-search {
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--fc-radius, 10px);
	border: 1px solid var(--fc-border, #d7dbe0);
	background: var(--fc-surface, #fff);
	color: var(--fc-text, #222);
	font-size: 15px;
	font-family: inherit;
	box-sizing: border-box;
}

.fc-repo-cats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
	align-items: center;
}

.fc-cat-chip-wrap {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.fc-cat-chip {
	border: 1px solid var(--fc-border, #d7dbe0);
	background: var(--fc-surface, #fff);
	color: var(--fc-text, #222);
	border-radius: 999px;
	padding: 7px 14px;
	font-size: 13px;
	font-family: inherit;
	cursor: pointer;
	transition: all 0.15s ease;
}

.fc-cat-chip:hover {
	border-color: var(--fc-accent, #2271b1);
}

.fc-cat-chip.is-active {
	background: var(--fc-accent, #2271b1);
	border-color: var(--fc-accent, #2271b1);
	color: var(--fc-accent-text, #fff);
}

.fc-cat-count {
	opacity: 0.6;
	font-size: 11px;
}

.fc-fav-btn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 18px;
	line-height: 1;
	padding: 4px;
	color: var(--fc-text, #b9bec5);
	opacity: 0.4;
	transition: transform 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.fc-fav-btn:hover {
	transform: scale(1.2);
	color: #f5a623;
	opacity: 1;
}

.fc-fav-btn.is-fav {
	color: #f5a623;
	opacity: 1;
}

.fc-repo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: 16px;
}

.fc-repo-card {
	background: var(--fc-surface, #fff);
	border: 1px solid var(--fc-border, rgba(0, 0, 0, 0.05));
	border-radius: var(--fc-radius, 12px);
	box-shadow: var(--fc-shadow, 0 1px 4px rgba(0, 0, 0, 0.08));
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.fc-repo-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
}

.fc-repo-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 8px;
}

.fc-repo-card-title {
	margin: 0;
	font-size: 16px;
	line-height: 1.3;
	color: inherit;
}

.fc-repo-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0;
	font-size: 12px;
}

.fc-cat-badge {
	background: var(--fc-surface-2, #eef2f7);
	color: var(--fc-text, #35424f);
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 11px;
	font-weight: 600;
}

.fc-repo-count {
	opacity: 0.6;
}

.fc-repo-achievement {
	font-size: 14px;
}

.fc-repo-progress-bar {
	height: 6px;
	background: var(--fc-surface-2, #eef0f3);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 4px;
}

.fc-repo-progress-bar span {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #2e8b3d, #58b368);
	border-radius: 999px;
	transition: width 0.3s ease;
}

.fc-repo-progress-label {
	font-size: 11px;
	opacity: 0.6;
}

.fc-repo-study {
	margin-top: auto;
	text-align: center;
}

.fc-repo-empty {
	text-align: center;
	opacity: 0.7;
	padding: 30px 0;
}

.fc-repo-guest-note {
	background: var(--fc-surface-2, #fff8e8);
	border: 1px solid var(--fc-border, #f2dfb3);
	border-radius: calc(var(--fc-radius, 10px) - 2px);
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 18px;
}

.fc-repo-back {
	background: var(--fc-surface-2, #eef0f3);
	color: var(--fc-text, #35424f);
	margin-bottom: 14px;
}

/* ====== Favoritos (perfil / aba do dashboard) ====== */
.fc-favorites-title {
	margin-bottom: 6px;
}

.fc-favorites-subtitle {
	margin: 24px 0 10px;
	font-size: 15px;
	opacity: 0.85;
}

.fc-favorites-cat-block {
	margin-bottom: 18px;
}

.fc-favorites-cat-name {
	margin: 0 0 8px;
	font-size: 13px;
}

/* ====== Painel de cores pessoais (aba Meus Flashcards) ====== */
.fc-theme-panel {
	background: var(--fc-surface, #fff);
	border: 1px solid var(--fc-border, rgba(0, 0, 0, 0.06));
	border-radius: var(--fc-radius, 10px);
	padding: 20px;
	margin-bottom: 10px;
}

.fc-theme-title {
	margin: 0 0 4px;
}

.fc-theme-hint {
	font-size: 13px;
	opacity: 0.7;
	margin: 0 0 14px;
}

.fc-theme-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
}

.fc-theme-preset {
	width: 52px;
	height: 34px;
	border-radius: 8px;
	border: 2px solid var(--fc-border, rgba(0, 0, 0, 0.12));
	padding: 0;
	overflow: hidden;
	display: flex;
	cursor: pointer;
	background: var(--fc-surface, #fff);
	transition: transform 0.15s ease, border-color 0.15s ease;
}

.fc-theme-preset:hover {
	transform: scale(1.1);
	border-color: var(--fc-accent, #2271b1);
}

.fc-theme-preset-half {
	flex: 1;
	height: 100%;
}

.fc-theme-preset-auto {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	color: var(--fc-accent, #2271b1);
}

.fc-theme-pickers {
	display: flex;
	gap: 18px;
	margin-bottom: 14px;
	font-size: 13px;
	align-items: center;
}

.fc-theme-pickers input[type="color"] {
	margin-left: 6px;
	width: 44px;
	height: 30px;
	border: 1px solid var(--fc-border, #d7dbe0);
	border-radius: 6px;
	padding: 2px;
	cursor: pointer;
	background: var(--fc-surface, #fff);
}

.fc-theme-preview {
	display: flex;
	gap: 12px;
	margin-bottom: 16px;
}

.fc-theme-preview-card {
	flex: 1;
	max-width: 160px;
	height: 84px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 14px;
	border: 1px solid var(--fc-border, rgba(0, 0, 0, 0.06));
	transition: background 0.2s ease, color 0.2s ease;
}

.fc-theme-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
}

.fc-theme-status {
	font-size: 13px;
	font-weight: 600;
}

.fc-theme-divider {
	margin: 22px 0;
	border: none;
	border-top: 1px solid var(--fc-border, rgba(0, 0, 0, 0.08));
}

@media (max-width: 480px) {
	.fc-repo-grid {
		grid-template-columns: 1fr;
	}
}

/* Seção de flashcards no perfil: mesmo respiro lateral (24px) das demais
   seções do perfil (favoritos, gamificação, comentários) — nada encostado. */
.mm-profile-flashcards {
	padding: 4px 24px 24px;
}

.mm-profile-flashcards .fc-repo {
	margin: 0;
	max-width: none;
}

/* ====== Subcategorias do filtro (aparecem ao escolher a mãe) ====== */
.fc-repo-subcats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: -8px 0 20px;
	padding: 10px 12px;
	background: var(--fc-surface-2, #f4f6f9);
	border-radius: calc(var(--fc-radius, 10px) - 2px);
	animation: fc-subcats-in 0.25s ease;
}

@keyframes fc-subcats-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.fc-subcats-label {
	font-size: 12px;
	opacity: 0.65;
	font-weight: 600;
}

.fc-subcat-chip {
	font-size: 12px;
	padding: 5px 12px;
}

/* ====== Widget "Flashcards desta Página" (sidebar) ====== */
.fc-page-widget-wrap {
	font-family: inherit;
	color: var(--fc-text, #222);
}

.fc-page-widget-title {
	margin: 0 0 10px;
}

.fc-page-widget {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fc-page-widget-item {
	background: var(--fc-surface, #fff);
	border: 1px solid var(--fc-border, rgba(0, 0, 0, 0.06));
	border-radius: var(--fc-radius, 10px);
	box-shadow: var(--fc-shadow, 0 1px 4px rgba(0, 0, 0, 0.08));
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.fc-page-widget-item.is-complete {
	border-color: rgba(46, 139, 61, 0.4);
}

.fc-page-widget-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 6px;
}

.fc-page-widget-name {
	font-weight: 700;
	font-size: 14px;
	line-height: 1.3;
}

.fc-page-widget-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
	margin: 0;
	font-size: 11px;
}

.fc-page-widget .fc-btn {
	padding: 9px 14px;
	font-size: 13px;
	text-align: center;
}

/* Realce rápido no baralho quando o widget rola até ele */
.fc-deck-highlight {
	animation: fc-deck-pulse 1.2s ease;
}

@keyframes fc-deck-pulse {
	0%   { box-shadow: 0 0 0 0 var(--fc-accent, #2271b1); }
	40%  { box-shadow: 0 0 0 5px color-mix(in srgb, var(--fc-accent, #2271b1) 45%, transparent); }
	100% { box-shadow: var(--fc-shadow, 0 1px 4px rgba(0, 0, 0, 0.1)); }
}


/* Convite sutil pra visitante (fim da sessão) — mesmo estilo do da Gamificação,
   duplicado aqui pro flashcard funcionar sozinho, sem depender daquele plugin. */
.fc-guest-note {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 12px;
	background: var(--fc-surface-2, #f4f6f9);
	border: 1px dashed var(--fc-border, #d7dbe0);
	text-align: center;
}

.fc-guest-note p {
	margin: 0 0 10px;
	font-size: 13px;
	opacity: 0.85;
}

.fc-guest-note .mmg-guest-note-actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}

.fc-guest-note .mmg-guest-note-btn {
	background: var(--fc-accent, #2271b1);
	color: var(--fc-accent-text, #fff) !important;
	text-decoration: none !important;
	border-radius: 12px;
	padding: 9px 20px;
	font-size: 13px;
	font-weight: 700;
	box-shadow: 0 3px 0 var(--fc-accent-dark, #1a5686);
}

.fc-guest-note .mmg-guest-note-btn-alt {
	background: var(--fc-surface, #fff);
	color: var(--fc-accent, #2271b1) !important;
	border: 2px solid var(--fc-border, #d7dbe0);
	box-shadow: 0 3px 0 var(--fc-border, #d7dbe0);
	padding: 7px 18px;
}