.lueckentext-hero {
    background:
        radial-gradient(circle at top left, rgba(240, 158, 11, 0.22), transparent 34%),
        radial-gradient(circle at bottom right, rgba(240, 158, 11, 0.14), transparent 26%),
        linear-gradient(140deg, rgba(44, 63, 74, 0.95), rgba(19, 32, 44, 0.95));
}

body[data-theme="light"] .lueckentext-hero {
    background:
        radial-gradient(circle at top left, rgba(240, 158, 11, 0.18), transparent 34%),
        radial-gradient(circle at bottom right, rgba(212, 136, 6, 0.12), transparent 28%),
        linear-gradient(140deg, rgba(255, 249, 240, 0.98), rgba(247, 239, 223, 0.98));
}

.cloze-source-textarea {
    min-height: 15rem;
}

.cloze-preview-shell {
    display: grid;
    gap: 1.4rem;
}

.preview-subtitle {
    margin: 0 0 0.75rem;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(16, 32, 44, 0.72);
}

.cloze-preview-text {
    padding: 1.2rem;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(252, 247, 236, 0.98));
    border: 1px solid rgba(240, 158, 11, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
    color: #1d2f3b;
}

.cloze-preview-text p {
    margin: 0;
    line-height: 1.85;
}

.cloze-preview-text p + p {
    margin-top: 1rem;
}

.empty-preview {
    min-height: 9rem;
    display: grid;
    place-items: center;
    text-align: center;
    color: rgba(16, 32, 44, 0.62);
}

.preview-blank {
    --preview-token-width: 11rem;
    --preview-token-height: 4.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--preview-token-width);
    min-width: var(--preview-token-width);
    height: var(--preview-token-height);
    margin: 0.2rem 0.35rem;
    padding: 0.5rem 0.8rem;
    border-radius: 18px;
    border: 2px dashed rgba(240, 158, 11, 0.48);
    background: rgba(255, 245, 222, 0.95);
    color: rgba(16, 32, 44, 0.72);
    font-size: 0.92rem;
    font-weight: 700;
    text-align: center;
    vertical-align: middle;
}

.cloze-preview-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.9rem;
}

.preview-token {
    --token-hue: 28;
    min-height: 4.8rem;
    padding: 0.9rem 1rem;
    border-radius: 18px;
    border: 1px solid hsla(var(--token-hue), 72%, 35%, 0.22);
    background:
        linear-gradient(180deg, hsla(var(--token-hue), 100%, 97%, 0.96), hsla(var(--token-hue), 86%, 88%, 0.98));
    box-shadow: 0 14px 26px hsla(var(--token-hue), 74%, 40%, 0.12);
    color: #173040;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

@media (max-width: 760px) {
    .preview-blank {
        --preview-token-width: 8.5rem;
        --preview-token-height: 4.2rem;
    }

    .cloze-preview-cards {
        grid-template-columns: repeat(auto-fit, minmax(8.8rem, 1fr));
    }
}