/* ===== Card Component ===== */
.result-container,
.card {
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    transition: all var(--transition-base);
}

.result-container:hover,
.card:hover {
    border-color: var(--color-border-light);
}

.result-header h2 {
    font-size: var(--font-size-title-2);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.generated-image {
    margin-bottom: var(--spacing-xl);
}

.generated-image img {
    width: 100%;
    border-radius: var(--border-radius-md);
}

.image-title {
    font-size: var(--font-size-subhead);
    color: var(--color-text-secondary);
    margin-top: var(--spacing-sm);
}

.translation-section,
.original-section,
.token-section,
.audio-section {
    margin-bottom: var(--spacing-xl);
}

.translation-section h3,
.original-section h3,
.token-section h3,
.audio-section h3 {
    font-size: var(--font-size-headline);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.formatted-text {
    color: var(--color-text-secondary);
    line-height: var(--line-height-relaxed);
    white-space: pre-wrap;
}

.sentence-audios {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.sentence-audio {
    padding: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
}

.sentence-audio h3 {
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

.download-options {
    display: flex;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0;
}

.download-all {
    margin-top: var(--spacing-xl);
}

.error {
    padding: var(--spacing-md);
    background-color: rgba(220, 53, 69, 0.2);
    border: 1px solid #dc3545;
    border-radius: var(--border-radius-md);
    color: #ff6b6b;
}

.img-fluid {
    max-width: 100%;
    height: auto;
}